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前 言 


移动 Web 在 当今 的 发 展 速度 是 一 日 千里 ， 移 动 互联 网 取代 PC 互联 网 已 经 成 为 趋势 ， 各 
公司 都 在 开发 自己 的 移动 APP, 为 用 户 提供 更 好 的 服务 , 也 希望 能 获取 更 多 的 移动 入 口 流量 。 
几乎 所 有 的 公司 都 在 改造 早期 的 网 站 ， 为 方便 用 户 使 用 手机 浏览 。 所 以 ， 移 动 网 站 和 APP 成 
为 当下 所 有 企业 在 移动 时 代 摆 取 用 户 资源 最 有 效 的 方法 。 

移动 开发 的 需求 很 大 ， 而 且 很 多 人 只 有 传统 的 网 站 开发 方法 ， 所 以 为 了 普及 移动 网 站 和 
APP 开发 的 需要 ， 我 们 编写 了 这 本 跨 平 台 开发 的 图 书 ， 让 传统 网 站 开发 人 员 和 新 进入 市 场 的 
开发 小 白 都 能 够 更 快速 地 开发 出 简洁 实用 的 移动 网 站 和 APP。 


本 书 的 编写 特点 


1. 结合 当下 技术 热点 ， 让 移动 互联 网 的 混合 开发 更 简单 。 移 动 互 联网 的 发 展 简直 可 以 
用 爆发 来 形容 ,传统 的 网 页 技术 从 兼容 性 和 美观 性 上 都 无 法 与 移动 Web 和 媲美 。 当 下 最 好 最 
快速 的 开发 移动 互联 网 的 技术 非 HTML 5 莫 属 , 微 信 内 嵌 HTML 5 网 页 和 游戏 的 爆发 也 促进 
了 HTML 5 在 国内 的 需求 。 对 于 安 卓 、iOS 等 跨 设备 的 需求 ， 又 促进 了 jQuery Mobile 的 跨 平 
台 技 术 的 发 展 。 本 书 结合 这 两 大 热点 ， 帮 助 读者 轻松 应 对 移动 互联 网 。 

2. 布局 移动 网 站 和 移动 应 用 ， 切 中 目前 企业 最 热 的 开发 需求 。 本 书 所 有 的 实例 或 小 示 
例 全 部 针对 移动 网 页 ， 这 是 市 场所 需 ， 因 为 所 有 的 企业 都 在 谋求 移动 方向 的 突破 ， 而 这 种 突 
破 的 第 一 步 就 是 将 网 页 改造 成 兼容 的 移动 网 页 。 

3. 低 成 本 ， 快 速 开发 ， 还 能 跨 平台 ， 利 用 最 好 最 流行 的 技术 进行 实战 演练 。 本 书 所 选 
的 HTML5 和 jQuery Mobile 都 是 开源 技术 ,不 需要 购买 大 量 的 硬件 和 软件 ， 完 全 低 成 本 ， 而 
且 这 两 种 技术 都 支持 快速 开发 且 还 能 跨 平台 ， 这 进一步 节约 了 企业 的 成 本 。 

4. 最 合理 的 章节 安排 。 不 管 是 PC 网 页 还 是 移动 网 页 ， 都 要 明白 网 页 的 构成 和 基本 元 素 
的 设计 。 本 书 首先 从 基础 网 页 讲 起 ， 然 后 讲解 HTML 5 的 技术 ,介绍 CSS 美化 网 页 ， 再 介绍 
CSS 3 帮助 读者 制作 更 酷 炫 的 移动 网 页 , 最 后 通过 jQuery 和 jQuery Mobile 的 讲解 , 帮助 读者 
将 移动 网 页 布局 到 任何 需要 的 平台 上 。 


本 书 的 内 容 安 排 


本 书 共 4 篇 16 章 ， 内 容 从 HTML 和 CSS 基础 ， 再 到 HTML 5 和 CSS 3， 最 后 是 jQuery 
和 jQuery Mobile。 


构建 移动 网 站 与 APP: HTML 5+CSS 3+jQuery Mobile 入 门 与 实战 


第 一 篇 (第 1 章 ~ 第 4 章 ) HTML 与 HTML 5。 回 顾 了 HTML 的 基础 知识 ， 重 点 介绍 了 
HTML 5 的 改进 ， 突 出 了 移动 网 页 在 设计 中 与 传统 网 页 的 不 同 ， 还 有 新 增加 的 一 些 特色 ， 主 
要 包括 HTML 网 页 的 基础 、 网 页 段落 的 排版 、 表 单 的 自动 化 、HTML 5 的 新 特色 等 。 

第 二 篇 (第 5 章 ~ 第 9 章 ) CSS 与 CSS 3。 本 篇 先 介 绍 了 CSS 的 基础 语法 ,然后 介绍 了 
利用 CSS 设计 网 页 中 的 文字 和 背景 , 之 后 介绍 了 CSS 3 的 一 些 特色 ,尤其 是 利用 媒体 查询 技 
术 实 现 的 跨 平台 网 页 ， 主 要 包括 网 页 样式 、 网 页 设计 基础 、 选 择 和 媒体 查询 。 最 后 还 通过 一 
个 完整 的 实例 剖析 了 一 个 HTML 5+CSS 3 网 站 的 实现 过 程 。 

第 三 篇 (第 10 章 ~ 第 14 章 ) jQuery 与 jQuery Mobile。 快速 开发 离 不 开 jQuery， 在 如 今 
移动 互联 网 迭代 速度 这 么 快 的 情况 下 ， 基 本 上 所 有 的 网 站 都 选择 了 jQuery， 因为 它 还 有 无 数 
多 的 插件 可 以 帮助 我 们 实现 更 绚丽 的 移动 网 页 。jQuery Mobile 也 是 跨 平 台 方案 的 首选 。 本 篇 
重点 介绍 这 两 个 技术 ， 包 括 jQuery 的 选择 器 、 事 件 、 移 动 开 发 、APP 布局 和 推广 等 。 

第 四 篇 (第 15 章 ~ 第 16 章 ) 移动 网 页 与 APP 实战 。 通 过 一 个 实时 股票 APP 和 在 线 视 
频 播 放 的 案例 ， 详 细 解 析 了 移动 网 页 开发 中 的 各 种 步骤 、 代 码 和 技术 ， 包 括 插件 的 使 用 、 界 
面 的 设计 、 数 据 库 的 连接 等 。 
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HTML 


第 1 章 
< 网 页 的 架构 基础 > 


本 书 开篇 我 们 先 介绍 HTML 网 页 的 架构 基础 。 相 信 读 者 对 于 HTML 网 页 一 定 很 熟悉 ， 那 么 
是 不 是 很 清楚 关于 HTML 的 准确 定义 呢 ? HTML 是 Hyper Text Mark-up Language 〈 超 文本 标记 
语言 ) 的 缩写 ， 其 规定 了 一 系列 的 语法 规则 ， 用 来 表示 比 “文本 ”更 丰富 的 内 容 ， 璧 如 链接 、 表 
格 、 图 形 、 照 片 、 动 画 、 音 视频 等 。 

市 面 上 的 主流 浏览 器 (包括 Google Chrome、Mozilla Firefox、Microsoft Internet Explorer & 
Microsoft Edge、Opera 等 及 其 他 第 三 方 浏览 器 ) 均 可 运行 基于 HTML 定义 的 语法 并 用 来 显示 
HTML 网 页 文档 。 因 此 可 以 讲 ， 我 们 日 常 在 互联 网 上 浏览 到 的 绝 大 部 分 网 页 ， 都 是 基于 HTML 
语法 编写 而 成 的 ，HTML 实际 上 就 是 一 个 互联 网 语言 标准 。 

本 章 主要 包括 以 下 内 容 : 

@ HTML 网 页 的 基础 构成 
基底 网 址 标记 -base 元 素 
用 CSS 定义 网 页 的 样式 
使 用 脚本 让 网 页 动 起 来 

利用 noscript 元素 检测 网 页 对 脚本 的 支持 
在 网 页 代码 中 添加 注释 方便 后 期 代码 的 阅读 
判断 浏览 器 对 HTML 5 属性 的 支持 


HTML 网 页 的 基础 构成 


我 们 常见 的 网 页 都 是 HTML 网 页 ，HTML 既然 是 一 种 标准 ， 那 网 页 就 有 基础 的 结构 形式 。 
本 节 的 目的 就 是 让 读者 了 解 一 个 HTML 网 页 的 基础 构成 。 


1.1.1 ”从 一 个 空白 的 HTML 网 页 说 起 


个 标准 的 HTML 网 页 必须 包括 一 些 固定 的 标签 ， 辟 如 DOCTYPE 标签 、html 标签 、head 
标签 和 body 标签 等 。 这 些 固定 元 素 构成 一 个 HTML 网 页 的 基础 骨架 ， 倘 若 缺 少 其 中 任何 一 项 ， 
都 有 可 能 造成 HTML 网 页 运行 时 出 现 不 可 预知 的 错误 。 所 以 ， 读 者 首先 要 清楚 HTML 网 页 的 基 
础 构成 ， 并 理解 每 个 标签 的 含义 与 作用 。 


【示例 1-1】 空白 的 HTML 网 页 

市 面 上 有 很 多 款 创建 、 编 辑 、 运 行 HTML 网 页 的 工具 〈 较 轻 量 级 的 有 EditPlus、UltraEdit、 
Sublime 等 ， 较 重量 级 的 有 Eclispe、Visual Studio、Dreamweaver 等 ， 至 于 选择 哪 款 主要 看 个 人 喜 
好 了 )， 这 里 笔者 选择 EditPlus 编辑 工具 自动 生成 一 个 最 基本 的 HTML 网 页 框架 (参见 源 代码 
chapter01/ch01-htmlcomp-init.html 文件 )， 主 要 代码 如 下 。 


在 空白 的 HTML 网 页 这 段 代码 中 ， 我 们 看 到 上 文中 提 到 的 几 个 标签 均 有 使 用 ， 如 第 01 行 中 
的 <!doctype> 标 签 ， 第 02 行 中 的 <html> 标 签 ， 第 03 行 中 的 <head> 标 签 以 及 第 11 行 中 的 <body> 
标签 。 

读者 一 定 注意 到 了 第 10 行 、 第 13 行 与 第 14 行 中 再 次 使 用 了 </head>、</body> 和 </html> 标 
签 ， 不 同 之 处 是 增加 了 一 个 “/” 斜 杠 字 符 。HTML 标准 将 第 02 行 、 第 03 行 和 第 11 行 的 标签 定 
义 为 开始 标记 ， 而 将 第 10 行 、 第 13 行 与 第 14 行 的 标签 定义 为 结束 标记 。 其 中 ， 第 02 行 的 
<html> 标 签 与 第 14 行 的 <html> 标 签 相互 对 应 ， 称 为 一 组 标记 。 同 理 ， 第 03 行 与 第 13 行为 一 组 
标记 ， 第 10 行 与 第 11 行为 一 组 标记 。 读 者 可 以 将 一 组 标记 之 间 的 内 容 理解 为 一 个 整体 ， 代 表 这 
个 标签 所 定义 的 内 容 ， 完 成 一 组 统一 的 功能 。 

代码 ch01-htmlcomp-init.html 实际 上 没有 定义 任何 实际 内 容 ， 在 浏览 器 中 运行 后 显示 的 是 一 
个 空白 的 页 面 ， 如 图 1.1 所 示 。 
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1.1 空白 的 HTML 网 页 
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1.1.2 ”通过 网 页 中 的 DOCTYPE 标签 识别 文档 类 型 


DOCTYPE 标签 是 一 种 标准 通用 标记 语言 的 文档 类 型 声明 ， 其 存在 的 意义 是 要 通知 标准 
通用 标记 语言 解析 器 ， 应 该 使 用 什么 样 的 文档 类 型 定义 (DTD， 由 W3C 标准 化 组 织 定义 ) 
来 解析 文档 。 

回顾 上 一 小 节 中 的 代码 段 ， 第 01 行使 用 的 <ldoctype html> 标 签 就 是 对 文档 类 型 的 声明 ， 根 
据 具体 定义 可 以 知道 声明 ch01-htmlcomp-inithtml 文件 为 一 个 html 网 页 。 


一 DOCTYPE 标签 在 使 用 时 不 区 分 大 小 写 。 ] 


这 里 有 几 点 是 读者 在 使 用 DOCTYPE 标签 时 必须 要 注意 的 : 

<ldoctype> 标 签 必须 声明 在 HTML 网 页 的 第 一 行 ， 位 于 <html> 标 签 之 前 ; 

严格 意义 上 讲 ，<!doctype> 不 是 一 个 HTML 标签 ， 而 是 定义 浏览 器 运行 HTML 网 页 时 ， 使 
用 哪个 HTML 版 本 来 进行 解释 的 指令 ; 

在 HTML 5 标准 下 ， 必 须 使 用 <!doctype html> 这 样 的 方式 来 定义 ， 可 见 ch01-htmlcomp- 
inithtml 文件 是 一 个 标准 HTML 5 网 页 。 而 HTML 4.01 标准 是 基于 SGML (标准 通用 标记 语 
言 ) 的 ， 所 以 必须 引用 DTD， 这 样 浏览 器 才能 正确 地 显示 HTML 网 页 内 容 。 


本 <ldoctype> 标 签 声明 时 是 没有 结束 标记 的 。 


这 里 比较 复杂 的 是 HTML 4.01 标准 ， 其 规定 了 三 种 文档 类 型 (DTD )， 分 别 为 Strict、 
Transitional 和 Frameset， 具 体 的 声明 方法 如 下 : 


(1) HTML Strict DTD 


如 果 想 避免 表现 层 的 混乱 ， 建 议 使 用 此 类 型 ， 并 与 层 二 样 式 表 (CSS) 配合 使 用 ; 

(2) HTML Transitional DTD 

如 果 使 用 了 不 支持 层 登 样式 表 (CSS) 的 浏览 器 而 又 不 得 不 使 用 HTML 网 页 来 展现 内 容 ， 
可 以 使 用 此 类 型 ; 


(3) Frameset DTD 


此 类 型 用 于 带 有 框架 的 HTML 网 页 ， 除 了 使 用 <frameset> 标 签 蔡 代 <body> 标 签 外 ， 也 可 以 
用 Frameset DTD 替代 Transitional DTD。 

这 里 顺便 提 一 句 ，DOCTYPE 标签 除了 可 以 声明 HTML 网 页 外 ， 还 可 以 用 于 声明 其 他 类 型 
文件 。 辟 如: <!doctype math> 用 于 声明 数学 标记 语言 ，<!doctype tmx> 用 于 声明 翻译 存储 交换 标 
记 语 言 ，<!doctype wml> 用 于 声明 无 线 标记 语言 等 。 可 见 DOCTYPE 标签 的 内 容 是 非常 丰富 的 ， 
感 兴趣 的 读者 可 以 参考 相关 文档 ， 进 一 步 深入 了 解 DOCTYPE 标签 的 内 容 。 


1.1.3 ”html 标签 声明 这 是 一 个 网 页 


html 标签 用 于 通知 浏览 器 这 是 一 个 HTML 网 页 。 一 般 来 讲 ，<html> 与 </html> 标 签 限定 了 
HTML 网 页 的 开始 标记 和 结束 标记 ， 标 记 之 间 的 内 容 是 HTML 网 页 的 头 部 和 主体 。 至 于 头 部 和 
主体 下 面 的 小 节 马 上 会 介绍 ， 也 就 是 读者 熟悉 的 head 标签 和 body 标签 。 

HTML 网 页 中 的 内 容 通常 需要 放置 在 <html> 标 签 中 。 在 HTML 网 页 的 头 部 可 以 放置 如 标 
题 、 兼 容 性 、 语 言 、 字 符 格 式 、 关 键 字 和 描述 等 重要 信息 ， 而 HTML 网 页 需要 向 用 户 展示 的 具 
体内 容 可 以 统统 放置 在 主体 中 。 

如 下 所 示 为 一 个 关于 html 标签 的 代码 段 (参见 源 代 码 chapter01/ch01-htmlcomp-html.html 文件 )。 


【示例 1-2】 ”html 标签 


在 这 段 HTML 代码 中 ， 第 02 行 与 第 09 行 就 是 对 <html> 和 </html> 标 签 的 使 用 ， 读 者 注意 到 
在 <html> 标 签 中 添加 了 一 个 字段 lang="en"， 一 般 称 其 为 属性 字段 ，lang 关键 字 代 表 规定 标签 内 
容 的 语言 ， 关 键 字 "en" 代 表 英文 ， 如 果 读 者 想 定义 中 文 可 以 使 用 "zh'" 关 键 字 。 


1.1.4 ”head 标签 定义 网 页 的 头 部 


head 标签 用 于 定义 HTML 网 页 的 头 部 ， 可 以 说 head 是 所 有 头 部 标签 的 容器 。 在 head 标签 
中 可 以 实现 描述 元 信息 (meta)、 添 加 层 登 样式 表 〈CSS)、 引 用 外 部 脚本 文件 〈JavaScript， 简 称 
JS)， 定 义 HTML 网 页 标题 以 及 与 其 他 文档 关系 等 功能 。 另 外 ， 绝 大 部 分 在 HTML 网 页 头 部 定 
义 的 数据 都 不 会 作为 页 面 的 具体 内 容 显示 给 用 户 。 

head 标签 位 于 HTML 网 页 的 头 部 ， 是 以 <head> 作 为 开始 标记 、 并 以 </head> 作 为 结束 标记 之 
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间 的 内 容 。 一 般 来 讲 ，head 头 部 中 包含 meta、base、link、script、title 等 常用 标签 ， 这 些 标签 的 
详细 说 明 如 下 : 


@@ ”meta 标签 可 以 定义 的 内 容 十 分 广泛 ， 辟 如 HTML 网 页 介绍 、HTML 网 页 关键 字 、 
HTML 网 页 编码 、 页 面 作者 、 自 动 跳 转 定义 以 及 robots 协议 等 内 容 ， 均 可 以 放置 在 其 
中 ; 

@ base 标签 是 定义 HTML 网 页 默认 打开 方式 的 声明 ; 

@ link 标签 用 于 定义 目标 文件 链接 ， 包 括 对 外 部 层 司 样式 表 ( CSS ) 文件 的 引用 、 对 外 部 
脚本 文件 (JS ) 文件 的 引用 以 及 对 favicon.ico 图 标的 引用 等 ; 

@ script 标签 既 可 以 用 于 引入 外 部 脚本 (JS ) 文件 ， 也 可 以 定义 谋 入 HTML 网 页 内 部 的 脚 
本 代码 ; 

@ style 标签 用 于 定义 直接 骨 入 网 页 的 层 司 样式 表 ( CSS ) 代码 ; 

@ title 标签 用 于 定义 HTML 网 页 的 唯一 标题 。 


下 面向 读者 介绍 使 用 head 标签 的 方法 (参见 源 代码 chapter01/ch01-htmlcomp-head.html 
文件 和 % 


【示例 1-3】 head 标签 


在 关于 head 标签 的 这 段 HTML 代码 中 ， 第 03 一 24 行 就 是 使 用 head 标签 的 方法 。 为 了 让 读 
者 对 head 标签 的 使 用 方法 有 个 全 面 的 了 解 ， 该 代码 段 尽 可 能 将 HTML 网 页 头 部 可 能 用 到 的 标签 
全 部 包含 了 进去 。 下 面 我 们 逐一 对 这 些 标签 进行 介绍 : 

第 04 一 11 行 是 对 meta 标签 的 使 用 ，meta 是 HTML 网 页 头 部 的 一 个 辅助 性 标签 。meta 标签 
共有 两 个 属性 ， 分 别 是 http-equiv 属性 和 name 属性 ， 其 中 ，http-equiv 属性 相当 于 http 协议 文件 
头 的 作用 ， 通 过 该 属性 可 以 向 浏览 器 回 传 数据 信息 ， 以 帮助 准确 地 显示 网 页 内 容 ， 其 属性 值 放 置 
在 与 之 对 应 的 content 属性 中 ; 而 name 属性 主要 用 于 描述 网 页 ， 包 括 分 类 信息 的 内 容 以 及 便于 
搜索 引擎 robots 协议 查找 的 内 容 ， 其 属性 值 同 样 放置 在 与 之 对 应 的 content 属性 中 。 

第 04 行 中 http-equiv 属性 定义 为 "Content-Type"，Content-Type 表示 设 定 的 显示 字符 集 ， 本 
代码 段 中 对 应 的 content 属性 定义 为 "textyhtml; charset=utf-8"， 表 明 本 HTML 网 页 设 定 的 显示 字符 
集 为 "utf-8"， 为 通用 的 Unicode 编码 格式 (utf-8 编码 支持 中 英文 字符 ， 相 比 于 传统 gb2312 中 文 
编码 更 通用 )。 

第 05 行 中 http-equiv 属性 定义 为 "Content-Language"，Content-Language 表示 给 HTML 网 页 
设 定 的 页 面 语言 ， 本 代码 段 中 对 应 的 content 属性 定义 为 "zh-cn"， 表 明 本 HTML 网 页 设 定 的 页 面 
语言 为 简体 中 文 〈 如 果 是 繁体 中 文 则 为 "zh-tw"， 而 "en-us" 表 示 英 语 〈 美 国 ))。 

第 06 行 中 name 属性 定义 为 "author"，author 表示 网 页 作者 ， 本 代码 段 中 对 应 的 content 属性 
定义 为 "king"。 

第 07 行 中 name 属性 定义 为 "revised"，revised 表示 网 页 最 后 一 次 更 改 的 作者 及 时 间 ， 本 代码 
段 中 对 应 的 content 属性 定义 为 "king,10/15/2015"。 

第 08 行 中 name 属性 定义 为 "generator"，generator 表示 创建 和 编辑 网 页 使 用 的 工具 软件 ， 本 
代码 段 中 对 应 的 content 属性 定义 为 "EditPlus"。 

第 09 行 中 name 属性 定义 为 "description"，description 表示 对 网 页 功能 、 内 容 的 相关 描述 ， 
是 属于 比较 重要 的 一 个 meta 属性 ， 本 代码 段 中 对 应 的 content 属性 定义 为 " HTML 网 页 head 标 
签 使 用 "。 

第 10 行 中 name 属性 定义 为 "keywords"，keywords 表示 网 页 的 关键 词 ， 本 代码 段 对 应 的 
content 属性 定义 为 "HTML, CSS, JavaScript"。 
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第 11 行 中 http-equiv 属性 定义 为 "Refresh"，Refresh 是 一 个 非常 有 用 的 功能 ， 可 以 对 网 页 自 
动 刷 新 并 重 定向 指向 新 页 面 ， 本 代码 段 中 对 应 的 content 属性 定义 为 "1;url=http://localhost:8080"， 
其 代表 两 个 内 容 ， 并 使 用 分 号 进行 分 割 ， 分 号 前 面 的 数值 1 表示 时 间 间 隔 为 1 秒 ， 分 号 后 面 的 
url 代表 重 定向 链接 地 址 ， 合 在 一 起 的 含义 就 是 在 间隔 1 秒 后 刷新 ， 重 新 跳 转 到 新 的 链接 地 址 
上 ; 因为 Refresh 功能 是 在 HTML 网 页 头 部 中 定义 的 ， 所 以 在 该 页 面 初次 打开 后 就 将 计算 时 间 间 
隔 并 执行 重 定向 操作 。 第 11 行 测试 后 的 结果 如 图 1.2 所 示 。 
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1.2 HTML 网 页 Refresh 功能 测试 


从 图 中 可 以 看 到 ， 运 行 ch01-htmlcomp-head.html 文件 后 ， 并 没有 看 到 HTML 网 页 主体 中 定 
义 的 代码 内 容 ， 而 是 很 快 就 跳 转 到 上 图 显示 的 页 面 地 址 (http://localhost:8080)， 这 个 页 面 其 实 是 
本 机 安装 的 Web 服务 器 一 一 Tomcat 8.0.8 的 主页 。 

第 12 行为 对 base 标签 的 使 用 ，base 的 功能 是 为 页 面 上 的 所 有 链接 规定 默认 地 址 或 默认 目 
标 ; 一 般 情况 下 ， 浏 览 器 会 从 当前 文档 的 url 地 址 中 获取 相应 的 数据 来 填写 相对 url 地 址 中 的 空 
白 ， 而 使 用 base 标签 则 可 以 使 用 指定 的 url 地 址 来 解析 所 有 的 相对 url 地 址 。 该 base 标签 有 两 个 
属性 ， 分 别 是 href 属性 和 target 属性 ， 其 中 ，href 属性 用 于 规定 页 面 中 所 有 相对 链接 的 基准 url 
地 址 ， 而 target 属性 用 于 指定 在 何 处 打开 页 面 中 所 有 的 链接 ， 其 共有 四 个 属性 值 : 


_blank 代表 在 新 的 窗口 打开 链接 ; 

_self 代表 自身 窗口 ， 一 般 可 不 用 定义 ; 

_parent 代表 在 父 窗口 或 超 链接 引用 框架 的 框架 集中 打开 链接 ; 

_top 则 表示 会 清除 所 有 被 包含 的 框架 并 将 文档 载 入 整个 浏览 器 窗口 。 


那么 在 本 行 中 ，href 属性 值 定义 为 "http://localhost:8080"，target 属性 值 定义 为 "_blank"。 
HTML 网 页 主体 中 的 第 29 一 33 行 是 对 第 12 行 的 测试 ， 第 30 行 定义 了 一 个 超 链接 ， 指 向 了 
前 面 创建 的 一 个 HTML 网 页 ch01-htmlcomp-inithtml， 并 且 党 试 在 本 窗口 中 打开 该 页 面 ， 下面 我 


第 1 章 网 页 的 架构 基础 


们 先行 注销 掉 上 面 第 11 行 的 重 定向 功能 ， 然 后 运行 本 页 面 的 结果 如 图 1.3 所 示 。 点 击 上 图 页 面 
中 定义 的 超 链接 ， 尝 试 在 本 窗口 打开 链接 ， 测 试 后 的 结果 如 图 1.4 所 示 。 
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图 1.3 HTML 网 页 之 base 标签 (一 ) 图 1.4 HTML 网 页 之 base 标签 (二 ) 


从 上 图 可 以 看 到 ，ch01-htmlcomp-init.html 页 面 是 在 新 窗口 中 被 打开 了 ， 而 且 该 页 面 似乎 并 
没有 被 正确 显示 出 来 :在 新 窗口 中 被 打开 是 因为 第 12 行 中 base 标签 的 target 属性 值 定义 为 
"blank"， 而 页 面 没 有 正确 显示 是 因为 ch01-htmlcomp-init.html 页 面 并 没有 被 正确 找到 。 这 是 什 
么 原因 造成 的 呢 ? 我 们 看 第 12 行 中 base 标签 的 href 属性 值 定义 为 "http://localhost:8080"， 这 样 全 
部 相对 url 链接 地 址 都 会 被 以 "http://localhost:8080" 为 基地 址 ， 就 是 被 指向 本 机 的 Tomcat 服务 
器 ， 而 ch01-htmlcomp-init.html 页 面 并 不 存在 于 该 服务 器 下 ， 自 然 也 就 无 法 找到 该 页 面 并 正确 显 
示 了 。 

第 13 行 是 对 link 标签 的 使 用 ，link 用 于 定义 文档 与 外 部 资源 的 关系 ， 最 常见 的 用 法 就 是 定 
义 外 部 链接 层 车 样 式 表 (CSS); 本 行 中 定义 了 保存 在 css 目录 下 的 外 部 样式 表 ， 文 件 名 称 为 
"style.css"。 

第 14 一 18 行 是 对 style 标签 的 使 用 ，script 用 于 定义 直接 嵌入 网 页 的 层 车 样式 表 (CSS) 代 
码 ; 我 们 先 不 管 第 15 一 17 行 具体 实现 了 什么 功能 ， 只 要 知道 这 三 行 是 对 <h1>、<h3> 和 <p> 这 三 
个 HTML 标签 进行 了 样式 定义 就 可 以 了 ; 在 页 面 主体 的 第 26 一 27 行 中 ， 使 用 <h3> 和 <p> 定 义 了 
两 行 页 面 内 容 ， 页 面 运 行 后 的 效果 如 图 1.5 所 示 。 

第 19 一 21 行 是 对 script 标签 的 使 用 ，script 用 于 引入 外 部 脚本 (JS) 文件 或 定义 内 部 脚本 
(JS) 代码 ， 其中， 第 20 行 定义 了 一 行 脚本 代码 ， 用 于 在 页 面 主体 输出 一 行文 本 信息 ， 页 面 运 
行 后 的 效果 如 图 1.6 所 示 。 
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另外 ，http-equiv 还 有 几 个 属性 可 能 读者 了 解 不 多 ， 但 也 是 非常 重要 的 功能 ， 在 这 里 向 读者 
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简单 介绍 : 
@ Expires (期 限 ) 
功能 描述 : 用 于 设 定 网 页 的 过 期 时 间 ， 如 果 网 页 过 期 则 必须 连接 服务 器 进行 重新 传输 ; 
使 用 方法 : <meta http-equiv="expires" content="Sun,31 Dec 2015 23:59:59 GMT">; 
注意 事项 : 必须 使 用 GMT 格式 时 间 。 
@ Pragma (cache 模式 ) 
功能 描述 : 禁止 浏览 器 从 本 地 计算 机 的 缓存 中 访问 HTML 网 页 的 内 容 ; 


使 用 方法 : <meta http-equiv="Pragma" content="no-cache">; 
注意 事项 : 如 果 这 样 设 定 ， 用 户 将 无 法 脱 机 浏览 网 页 。 


@ Set-Cookie (cookie 过 期 设 定 ) 


功能 描述 ， 如 果 网 页 过 期 则 保存 在 本 机 的 全 部 cookie 将 被 自动 删除 ; 

使 用 方法 : <meta http-equiv="Set-Cookie" content="cookie-value=xxx; expires= Sun,31 Dec 
2015 23:59:59 GMT; path=/ ">; 

注意 事项 :必须 使 用 GMT 格式 时 间 。 


@ ”Window-target (显示 窗口 的 设 定 ) 


功能 描述 :强制 HTML 网 页 在 当前 窗口 以 独立 页 面 方式 显示 ; 
使 用 方法 : <meta http-equiv="Window-target" content="_top">; 
注意 事项 : 用 来 防止 外 部 页 面 在 框架 里 调用 本 页 面 。 


1.1.5 ”body 元 素 定义 网 页 的 主体 


body 标签 用 于 定义 HTML 网 页 的 主体 ， 我 们 在 网 页 上 看 到 的 全 部 内 容 〈 璧 如 文本 、 超 链 
接 、 表 单 、 照 片 、 动 画 、 视 频 等 ) 都 是 放置 在 <body></body> 标 签 之 中 的 。 

body 标签 自身 可 以 包含 几 个 属性 ， 用 于 定义 HTML 网 页 主体 的 背景 颜色 、 背 景 图 片 、 文 本 
颜色 、 链 接 颜色 等 。 不 过 由 于 CSS 样式 表 的 存在 ， 一 般 不 建议 直接 在 body 标签 自身 中 定义 这 些 
属性 ， 比 较 标 准 的 方法 是 全 部 定义 在 CSS 样式 表 之 中 。 下 面 这 几 行 就 是 直接 在 body 标签 自身 中 
定义 页 面 背景 颜色 (bgcolor="red"， 设 定 为 红色 )， 读 者 可 以 参考 : 


针对 body 标签 比较 常用 的 做 法 是 定义 事件 属性 ， 由 于 body 标签 地 位 的 特殊 性 (其 是 
HTML 网 页 主体 标签 ， 在 页 面 初始 化 后 body 标签 是 最 先 加 载 的 标签 )， 我 们 可 以 在 body 标签 定 
义 onload 事件 属性 ， 关 于 onload 事件 属性 ， 后 面 的 章节 中 会 有 详细 介绍 。 现 在 我 们 只 需 知道 该 
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人 


事件 属性 可 以 完成 页 面 加 载 后 立即 执行 JS 脚本 的 功能 即 可 。 
下 面向 读者 介绍 使 用 body 标签 的 方法 (参见 源 代码 chapter01/ch01-htmlcomp-body.html 
文件 )。 


【示例 1-4】 ”body 标签 


在 关于 body 标签 的 这 段 HTML 代码 中 ， 第 16 行 是 对 body 标签 的 使 用 ， 在 body 标签 内 ， 
通过 onload 事件 属性 在 页 面 初始 化 时 触发 了 一 个 自 定义 JS 函数 〈 函 数 名 称 为 nit0)， 该 函数 的 
定义 在 第 11 一 14 行 中 ， 主 要 是 完成 了 对 第 19 行 中 定义 一 个 层 〈div) 标签 进行 动态 更 新 内 容 的 
操作 ; 页 面 运 行 后 的 效果 如 图 1.7 所 示 。 


所 全 iocalhost65542/html C QQ 提 天 


HTML 之 body 标 签 元 素 


初始 化 时 动态 添加 页 面 内 容 ! 


1.7 HTML 网 页 之 body 标签 
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在 原始 的 ch01-htmlcomp-body.html 文件 中 ，body 主体 内 并 没有 定义 “初始 化 时 动态 添加 页 
面 内 容 ! ”这 条 文本 信息 ， 不 过 从 图 1.7 中 的 显示 效果 来 看 ， 这 条 文本 信息 没有 经 过 用 户 任 


何 操作 却 显示 出 来 了 ， 这 表明 该 文本 信息 是 在 页 面 加 载 时 动态 添加 进去 的 。 


下 .2 基底 网 址 标记 base 标签 


在 前 一 小 节 中 向 读者 简要 介绍 过 base 标签 ， 由 于 base 标签 在 大 型 网 站 中 比较 常用 ， 在 这 一 
小 节 我 们 单独 拿 出 来 介绍 base 标签 的 用 法 。 

一 般 情 况 下 ， 浏 览 器 会 将 当前 页 面 的 url 地 址 作为 基地 址 ， 如 果 想 改变 所 有 链接 默认 基地 
址 ， 可 以 使 用 base 标签 来 实现 。 通 过 在 base 标签 中 设 定 新 的 基地 址 ， 浏 览 器 将 不 再 使 用 当前 页 
面 的 ud 地 址 作为 基地 址 ， 所 有 的 相对 链接 地 址 将 使 用 新 设 定 的 基地 址 来 进行 解析 。 例 如 ， 
HTML 网 页 中 常用 的 a 标签 、img 标签 、link 标签 、form 标签 等 ， 其 中 的 相对 url 地 址 均 会 按照 
base 标签 中 设 定 的 新 基地 址 进行 解析 。 

下 面向 读者 介绍 使 用 body 标签 进行 图 片 定位 的 操作 方法 (参见 源 代码 chapter0l/ch01- 
htmlcomp-base-img.html 文件 )。 


【示例 1-5】 ”base 标签 


在 这 段 HTML 代码 中 ， 第 05 行 与 第 06 行 就 是 对 base 标签 的 使 用 ， 在 这 两 行 中 的 body 
标签 内 ， 通 过 href 属性 定义 了 两 个 基地 址 路 径 ， 这 两 个 路 径 指向 了 我 们 预先 保存 的 两 组 图 
片 ; 在 第 12 一 13 行 中 ， 使 用 img 标签 在 页 面 中 显示 了 两 张 图 片 ， 我 们 预想 的 是 第 12 行 显示 


第 05 行 中 定义 路 径 中 的 图 片 ， 而 第 13 行 显示 第 06 行 中 定义 路 径 中 的 图 片 ， 页 面 运行 后 的 
效果 如 图 1.8 所 示 。 
从 显示 的 效果 可 以 看 到 ， 第 12 行 定 义 的 图 片 被 正确 显示 出 来 了 ， 而 第 13 行 定义 的 图 片 却 无 


法 ] 


换 ， 


E 确 显示 仅仅 显示 出 图 片 文 件 名 称 )， 这 是 什么 原因 造成 的 呢 ? 
我 们 尝试 将 源 代码 文件 中 的 第 05 行 与 第 06 行 调换 先后 顺序 ， 页 面 运行 后 的 效果 发 生 了 变 
如 图 1.9 所 示 。 


€ 图 localhost63342/htm-e 7  C A 再现 » 
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图 1.8 HTML 网 页 之 base 标签 (一 ) 图 1.9 HTML 网 页 之 base 标签 (二 ) 
从 图 中 显示 的 效果 可 以 看 到 ， 第 12 行 定 义 的 图 片 没有 显示 出 来 〈 同 样 仅仅 显示 出 图 片 文件 


名 称 )， 而 第 13 行 定 义 的 图 片 却 正确 显示 出 来 了 。 由 此 可 见 ， 如 果 使 用 多 个 base 标签 定义 基地 
址 路 径 ， 仅 仅 最 先 定义 的 能 生效 ， 之 后 定义 的 会 被 浏览 器 全 部 无 视 ， 这 点 读者 使 用 时 要 注意 。 


下 面 我 们 再 模拟 一 个 包含 三 个 HTML 页 面 的 简单 网 站 ， 主 要 是 演示 使 用 body 标签 进行 基地 


址 转换 的 操作 方法 。 这 是 第 一 个 页 面 代码 (参见 源 代码 chapter01l/ch01-htmlcomp-base-urlhtml 文 
件 )， 主 要 起 到 网 站 主页 的 作用 。 


【示例 1-6】 ”base 标签 基地 址 操作 (一 ) 
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在 这 段 HTML 代码 中 ， 第 05 行使 用 base 标签 定义 了 一 个 基地 址 ("Jur")， 该 地 址 是 ch01- 
htmlcomp-base-url.html 文件 所 在 目录 下 的 一 个 子 目录 〈 名 称 为 "url"); 因此 ， 第 14 行 中 定义 的 超 
链接 地 址 将 会 以 第 05 行 定义 的 基地 址 进行 解析 。 同 时 ，target 属性 定义 为 " blank"， 这 样 该 页 面 
内 所 有 超 链接 指向 的 页 面 文件 均 会 在 新 窗口 中 打开 。 

下 面 是 第 二 个 页 面 代码 〈 参 见 本 书 源 代 码 chapter01/url/ch01-htmlcomp-base-url-a.html 文 
件 )， 这 个 页 面 代码 即 是 【示例 1-6】 中 第 14 行 定 义 的 超 链接 所 引用 的 页 面 文件 ， 该 文件 保存 在 
子 目 录 "url" 中 。 


【示例 1-7】 ”base 标签 基地 址 操作 〈 二 ) 


在 这 段 HTML 代码 中 ， 没 有 使 用 base 标签 进行 任何 设 定 ， 这 样 第 13 行 中 超 链接 引用 的 页 
面 文件 将 会 在 本 窗口 中 打开 。 

下 面 是 第 三 个 页 面 代码 (参见 本 书 源 代码 chapter0l/urlych01-htmlcomp-base-url-b.html 文 
件 )， 该 文件 即 是 【示例 1-7】 中 第 13 行 定义 的 超 链 接 所 引用 的 页 面 文件 。 


【示例 1-8】 ”base 标签 基地 址 操作 (三) 


在 这 段 HTML 代码 中 ， 第 05 行使 用 base 标签 定义 了 一 个 基地 址 ("..")， 该 地 址 是 ch01- 
htmlcomp-base-url-b.html 文件 所 在 目录 的 上 一 级 目录 ( 即 ch01-htmlcomp-base-url.html 文件 所 在 
目录 ); 因此 ， 第 13 行 中 定义 的 超 链 接地 址 将 会 以 第 05 行 定义 的 基地 址 进行 解析 ， 这 样 就 可 以 
跳 转 回 主页 面 。 同 时 ，target 属性 定义 为 "blank"， 这 样 该 页 面 内 所 有 超 链接 指向 的 页 面 文件 均 
会 在 新 窗口 中 打开 。 

最 后 ， 测 试 这 个 模拟 的 小 网 站 。 首 先 运行 ch01-htmlcomp-base-url.html 主页 面 文件 ， 页 面 打 
开 后 的 效果 如 图 1.10 所 示 。 在 图 中 显示 有 当前 页 面 的 地 址 信息 以 及 链接 到 新 页 面 的 超 链接 地 址 
信息 。 

点 击 页 面 中 的 超 链接 ， 尝 试 打 开 ch01-htmlcomp-base-url-a.html 文件 ， 运 行 后 的 效果 如 图 
1.11 所 示 。 在 图 中 我 们 看 到 页 面 ch01-htmlcomp-base-url-a.html 在 新 的 窗口 中 打开 了 ， 并 且 提 示 
当前 页 面 路 径 在 子 目录 "url" 中 。 点 击 页 面 中 的 超 链 接 尝试 打开 ch01-htmlcomp-base-url-b.html 文 
件 ， 运 行 后 的 效果 如 图 1.12 所 示 。 

在 图 1.12 中 ， 我 们 看 到 页 面 ch01-htmlcomp-base-url-b.html 在 原 窗口 中 打开 了 ， 并 且 提示 当 
前 页 面 路 径 仍 在 子 目 录 "url" 中 。 点 击 页 面 中 的 超 链接 尝试 返回 到 ch01-htmlcomp-base-url.html 文 
件 ， 运 行 后 的 效果 如 图 1.13 所 示 。 

在 图 1.13 中 ， 我 们 看 到 主页 面 ch01-htmlcomp-base-urlLhtml 在 新 窗口 中 重新 打开 了 ， 不 同 
之 处 是 经 过 一 系列 操作 之 后 ， 浏 览 器 中 一 共 打 开 了 三 个 页 面 ， 同时， 由 于 合理 地 使 用 了 base 
标签 进行 了 相对 路 径 解析 ， 使 得 这 三 个 HTML 页 面 在 根 目 录 和 子 目 录 〈"url") 之 间 实 现 了 相 
互 跳 转 。 
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旺 HTML 之 basetz 和 元 素 x Ps 2 mx + Se 
所 力 locaalhost63342/html CQ 香 亏 » 三 € @ localhost63342/htm © Qa 站 |i 虹 
HTML 之 base 标 签 元 素 HTML 之 base 标 签 元 素 
当前 地 址 : ch01-htmlcomp-base-url.html 当前 地 址 : url/ch01-htmlcomp-base-url-a.html 
链接 到 : url/ch01-htmlcomp-base-url-a.html 链接 到 : url/ch01-htmlcomp-base-url-b.html 


图 1.10 HTML 网 页 之 base 标签 基地 址 操作 (一) ”图 1.11 HTML 网 页 之 base 标签 基地 址 操作 〈 二 ) 


口 x 
PT 
€ |®@ localhost:63342/ht © Qs »| 堵 
HTML 之 base 标 签 元 素 
当前 地 址 : url/ch01-htmlcomp-base-url-b.html HTML 之 base 标 答 元 素 


当前 地 址 ; ch01-htmkcomp-base-urLhtml 
名 给 双 : urlch0l-htmkomp-basc-urd-ahtml 


返回 到 : ch01-htmlcomp-base-url.html 


图 1.12 HTML 网 页 之 base 标签 基地 址 操作 (三 ) ”图 1.13 HTML 网 页 之 base 标签 基地 址 操作 四 ) 


.本 定义 css 样式 表 为 网 页 排版 


-个 网 页 仅 有 内 容 是 不 够 的 ， 还 需要 进行 排版 ， 使 用 户 看 起 来 更 舒服 。CSS 样式 表 的 目的 
就 是 为 网 页 排版 ， 美 化 网 页 。 


1.3.1 CSS 样式 表 概 述 


CSS 是 Cascading Style Sheets 的 缩写 ， 一 般 中 文 翻译 为 “ 层 登 样式 表 ”， 是 一 种 用 来 表现 
HTML 网 页 样式 的 技术 。CSS 最 初 是 作为 W3C 的 一 项 标准 推出 的 ， 从 CSS 1 版 本 开始 、 经 过 
CSS 2 版 本 的 完善 ， 目 前 的 CSS 3 版 本 已 经 被 广泛 使 用 ， 并 成 为 一 种 事实 上 的 设计 标准 。 

使 用 CSS 设计 网 页 的 优点 是 能 够 真正 做 到 将 网 页 内 容 与 表现 形式 进行 分 离 ， 这 样 设计 人 员 
的 分 工 可 以 更 为 细 化 ， 工 作 效 率 也 会 明显 提高 。 有 具体 来 说 ，CSS 能 够 支持 几乎 全 部 字体 风格 与 
字号 大 小 ， 能 够 对 网 页 中 的 对 象 位 置 进 行 像素 级 别 的 精确 定位 ， 能 够 对 网 页 对 象 的 样式 进行 动态 
编辑 ， 能 够 进行 简单 的 人 机 交互 设计 ， 是 目前 基于 网 页 内 容 展示 最 优秀 的 表现 类 设计 语言 。 

在 网 页 上 使 用 CSS 的 方法 基本 有 三 种 形式 ， 分 别 为 外 链 式 、 嵌 入 式 和 内 联 式 〈 可 能 不 同 教 
材 上 的 名 称 有 所 区 别 )， 具 体 如 下 : 


(1) 外 链 式 (Linking): 具体 方法 是 将 网 页 链接 到 外 部 样式 表 ; 一 般 如 果 页 面 需 要 很 多 样式 
的 时 候 ， 外 链 式 CSS 是 最 合理 的 选择 ， 使 用 外 链 式 CSS 可 以 通过 修改 一 个 CSS 文件 来 改变 整个 
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页 面 或 网 站 的 样式 风格 。 外 链 式 CSS 的 基本 使 用 方法 如 下 : 


(2) 嵌入 式 (Embedding): 具体 方法 是 在 网 页 上 创建 嵌入 的 样式 表 ， 一般 如 果 单 个 页 面 需 
要 定制 的 样式 时 ， 媒 入 式 CSS 是 很 好 的 方法 ;设计 人 员 可 以 在 HTML 网 页 头 部 通过 <style> 标 签 
定义 嵌入 式 CSS。 幅 入 式 CSS 的 基本 使 用 方法 如 下 : 


(3) 内 联 式 〈Inline): 具体 方法 是 在 单个 页 面 元 素 中 加 入 样式 表 ， 只 有 当 页 面 中 的 个 别 元 素 
需要 单独 的 样式 时 ， 才 推荐 使 用 内 联 式 CSS。 内 联 式 CSS 的 基本 使 用 方法 如 下 : 


HTML 网 页 在 解析 CSS 时 是 有 优先 级 的 ， 其 顺序 如 下 : 内 联 式 CSS > 懈 入 式 CSS > 外 联 式 
CSS， 因 此 设计 CSS 时 要 考虑 优先 级 顺序 ， 否 则 可 能 无 法 显示 出 预想 的 样式 效果 。 

另外 ， 目 前 应 用 CSS 样式 表 最 推荐 的 方式 是 DIV+CSS 布局 方式 ， 其 原因 很 容易 理解 ， 页 面 
结构 越 简单 、 通 过 修改 CSS 改变 页 面 风格 也 就 越 容易 。 对 于 大 型 站 点 来 说 ， 倘 若 页 面 中 使 用 的 
标签 种 类 繁多 、 结 构 复杂 ， 那 维护 起 来 CSS 简直 就 是 一 场 灾难 ， 可 能 需要 手动 修改 很 多 页 面 ; 
而 如 果 整 个 站 点 都 使 用 DIV+CSS 进行 布局 ， 可 能 仅仅 需要 修改 CSS 样式 表 中 的 一 段 代码 就 可 以 
完成 对 整个 站 点 页 面 风格 的 修改 。 


1.3.2 ”定义 外 链 式 CSS 样式 表 


外 链 式 CSS 是 大 型 站 点 首选 的 定义 方式 ， 下 面 我 们 使 用 外 链 式 CSS 方式 创建 一 个 页 面 ， 体 
会 一 下 通过 修改 CSS 文件 中 的 几 行 代码 就 可 以 改变 整个 页 面 样式 风格 的 效果 。 

下 面 是 一 个 外 链 了 两 个 CSS 样式 文件 的 简单 HTML 网 页 页 面 (参见 源 代码 chapter01/ch01- 
htmlcomp-css-link.html 文件 )。 


【示例 1-9】 ”外 链 式 CSS 样式 表 之 HTML 网 页 


=h 
Ce] 
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在 这 段 HTML 代码 中 ， 第 05 行 与 第 06 行 通过 link 标签 引用 了 两 个 CSS 样式 文件 ， 第 一 个 
样式 文件 (文件 名 称 position.css) 用 于 定义 定位 、 边 距 等 样式 ， 第 二 个 样式 文件 〈 文 件 名 称 
fontcss) 用 于 定义 字体 大 小 、 风 格 等 样式 。 设 计时 将 CSS 样式 按照 不 同 的 类 别 放置 于 不 同 的 
CSS 样式 文件 中 ， 是 比较 合理 的 编程 习惯 ， 便 于 后 期 的 修改 与 维护 操作 。 

下 面 是 第 一 个 CSS 样式 文件 (参见 源 代码 chapter01/css/position.css 文件 )， 用 于 定义 标签 的 
定位 、 边 距 等 样式 。 


【示例 1-10】 ”外 链 式 CSS 样式 表 之 边 距 定 义 


在 这 段 CSS 代码 中 ， 主 要 使 用 CSS 的 margin 属性 和 padding 属性 定义 了 标签 的 外 边 距 与 内 
边 距 数值 。 

下 面 是 第 二 个 CSS 样式 文件 〈 参 见 源 代 码 chapter01/css/font.css 文件 )， 用 于 定义 文本 字体 
等 样式 。 


【示例 1-11】 外 链 式 CSS 样式 表 之 字体 定义 


在 这 段 CSS 代码 中 ， 主 要 使 用 CSS 的 font 属性 和 letter-spacing 属性 定义 了 字体 样式 与 字符 
间距 数值 。 

下 面 我 们 运行 测试 这 个 页 面 ， 效 果 如 图 1.14 所 示 。 我 们 看 到 了 使 用 letter-spacing 字符 间距 
属性 的 效果 ， 在 第 15 行 中 定义 了 一 个 负 值 的 字符 间距 ， 则 图 中 的 第 三 行文 本 被 有 效 压缩 了 。 
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最 后 ， 我 们 向 读者 演示 如 何 通 过 修改 外 链 式 CSS 文件 中 的 一 行 或 几 行 ， 达 到 改变 页 面 整 
体 风格 的 效果 。 我 们 在 chapter01/css/font.css 样式 文件 中 的 第 5 行 后 ， 添 加 一 行 样式 定义 ， 具 
体 如 下 : 


重新 刷新 chapter01/ch01-htmlcomp-css-link.html 页 面 文件 ， 运 行 后 的 效果 如 图 1.15 所 示 。 我 
们 看 到 页 面 中 的 全 部 文本 被 添加 了 下 划 线 ， 这 是 因为 上 面 添加 的 样式 代码 是 作用 于 body 标签 ， 
所 以 页 面 主体 中 的 全 部 文本 均 会 被 添加 该 样式 效果 。 


€ 四 oaahast63342/html | C QQ 直下 信和 白 » 三 € loclhost63342/html” CQ 更 柚 全 和 白 > 三 
| 
HTML 之 外 链 式 CSS HTML 之 外 链 式 CSS 
HHMIiEtCSS HM YESS 
HTML 之 外 备 式 cs5s5s HH 了 ML 之 外 链 式 Cc 5 5 
图 1.14 外 链 式 CSS 样式 表 效 果 图 (一 ) 图 1.15 ”外 链 式 CSS 样式 表 效果 图 (二 ) 


1.3.3 定义 CSS 样式 style 标签 


外 链 式 CSS 固然 是 建设 大 型 站 点 所 推荐 的 定义 样式 方法 ， 但 如 果 仅 仅 需要 在 某 个 单独 的 页 
面 加 入 一 些 特 别 的 样式 风格 ， 使 用 style 标签 还 是 相对 快捷 的 方法 ， 维 护 起 来 也 比较 方便 ， 毕 竞 
所 定义 的 CSS 样式 代码 仅仅 对 本 页 面 的 内 容 才 有 效 。 

下 面 是 一 个 通过 style 标签 定义 CSS 样式 风格 的 HTML 网 页 页 面 (参见 源 代码 
chapter01/ch01-htmlcomp-css-style.html 文件 )。 


【示例 1-12】 CSS 样式 style 标签 


在 这 段 HTML 代码 中 ， 第 05 一 37 行 通 过 style 标签 定义 了 CSS 样式 代码 ， 读 者 可 以 将 这 段 
样式 代码 与 【示例 1-10】 和 【示例 1-11】 的 样式 代码 进行 比较 ， 会 发 现 【示例 1-12】 将 定位 、 
边 距 等 样式 和 字体 大 小 、 风 格 等 样式 合并 在 一 起 了 ， 这 也 是 通过 style 标签 定义 样式 代码 的 特 
点 。 因 此 ， 通 过 style 标签 定义 样式 代码 仅仅 适合 于 单个 HTML 网 页 页 面 的 场景 ， 这 样 在 后 期 修 
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改 与 维护 操作 时 还 是 比较 方便 的 ， 同 时 还 可 以 满足 对 单个 页 面 定义 特殊 风格 的 CSS 样式 代码 的 
下 面 我 们 运行 测试 这 个 页 面 ， 页 面 打 开 后 的 效果 如 图 1.16 所 示 。 


1.16 定义 CSS 样式 style 标签 效果 图 


1.3.4 定义 内 联 式 CSS 样式 表 


除了 外 链 式 CSS 样式 表 和 榜 入 式 CSS 样式 表 外 ， 还 有 一 种 常用 的 方式 就 是 内 联 式 CSS 样式 
表 。 该 方式 非常 适用 于 在 具体 的 标签 内 部 加 入 很 短 的 一 段 样式 代码 ， 是 最 为 快捷 方便 的 定义 方 
法 。 但 对 于 大 型 站 点 ， 内 联 式 CSS 维护 起 来 是 比较 费时 费力 的 ， 毕 竞 设 计 人 员 需 要 在 HTML 页 
面 通 篇 代码 中 定位 到 具体 的 标签 后 ， 才 能 修改 其 CSS 样式 代码 。 当 然 ， 目 前 流行 的 集成 开发 工 
有 具 功能 都 十 分 强大 ， 可 以 协助 设计 人 员 快 速 定 位 ， 不 过 笔者 还 是 建议 不 要 在 大 型 站 点 的 开发 中 ， 
大 量 使 用 内 联 式 CSS 样式 表 。 

下 面 是 一 个 使 用 内 联 式 CSS 定义 样式 代码 的 HTML 网 页 页 面 (参见 源 代码 chapter01/ch01- 
htmlcomp-css-inline.html 文件 )。 


【示例 1-13】 内 联 式 CSS 样式 表 
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在 这 段 HTML 代码 中 ，CSS 样式 代码 是 嵌入 到 每 一 个 具体 的 标签 内 部 的 。 例 如 : 第 07 行 对 
body 标签 使 用 style 属性 定义 了 外 边 距 、 字 体 和 下 划 线 这 三 个 样式 ， 第 09、11 和 12 行 分 别 对 
hl1、h3 和 p 这 三 个 标签 使 用 style 属性 定义 了 外 边 距 、 内 边 距 和 字体 这 三 个 样式 ， 第 10 行 对 div 
标签 使 用 style 属性 定义 了 外 边 距 和 内 边 距 这 两 个 样式 。 

下 面 我 们 运行 测试 这 个 页 面 ， 打 开 后 的 效果 如 图 1.17 所 示 。 


岂 HTML 之 内 了 ECSS 
€ | 图 Iocalhost63542/html * © | QR 2 于 


图 1.17 内 联 式 CSS 样式 表 效 果 图 


在 图 1.17 中 ， 我 们 看 到 定义 的 CSS 样式 效果 全 部 显示 出 来 了 ， 再 回 过 头 去 看 【示例 1- 
13】 中 的 代码 ， 由 于 在 每 一 个 标签 中 均 加 入 了 CSS 样式 代码 ， 整 段 代 码 显 得 腑 肿 纷 乱 ， 远 没 
有 使 用 外 链 式 CSS 样式 和 style 标签 的 CSS 样式 那样 层次 分 明 。 可 以 想象 ， 当 HTML 网 页 页 
面 中 包含 成 百 上 千 个 标签 且 样式 风格 极为 复杂 时 ， 使 用 内 联 式 CSS 样式 简直 会 是 一 场 灾难 ， 
维护 的 难度 可 想 而 知 。 因 此 ， 使 用 内 联 式 CSS 样式 表 时 务必 要 简短 精 悍 ， 仅 仅 在 最 需要 的 时 
候 再 使 用 该 方式 。 


1 .4 添加 网 站 logo 


网 站 logo 通常 就 是 指 一 个 标志 符号 ， 该 标志 符号 通常 使 用 文字 、 图 形 、 色 彩 等 手法 组 合 而 
成 ， 并 表达 出 一 定 的 特殊 内 涵 。 我 们 举 一 些 例子 ， 互 联网 巨头 〈 壁 如 Google、Facebook、 
Microsoft 等 ) 的 门户 网 站 一 般 都 使 用 以 自己 公司 名 称 为 主题 设计 制作 的 网 站 logo， 产 品 设备 制 
造 商 〈 和 譬如 汽车 、 服 装 、 食 品 等 ) 的 公司 网 站 一 般 都 使 用 其 产品 注册 商标 为 主题 设计 制作 的 网 站 
logo; 而 诸如 提供 娱乐 、 购 物 、 旅 游 等 在 线 服 务 类 网 站 的 logo， 设 计 理 念 更 为 丰富 多 彩 ， 写 意 性 
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和 抽象 性 的 特点 更 为 突出 。 可 以 说 ， 无 论 公司 网 站 采用 什么 样 风格 形式 的 logo， 其 最 突出 的 特 
征 就 是 能 够 表达 出 公司 的 核心 价值 ， 能 够 给 用 户 最 直接 、 最 深刻 、 最 具 想象 力 的 视觉 效果 。 
网 站 logo 设计 大 概 可 以 分 为 以 下 几 大 类 : 


@ 第 一 大 类 是 文字 logo， 指 使 用 中 文 、 英 文 、 数 字 等 符号 ， 经 过 艺术 处 理 和 美化 加 工 后 
形成 的 文字 标志 ， 且 往往 是 以 公司 名 称 为 主体 而 设计 的 ; 

@ 第 二 大 类 是 图 形 logo， 指 由 点 、 线 、 线 条 、 面 等 不 规则 图 形 所 组 成 ， 并 配 有 鲜明 色彩 
对 比 所 创造 出 来 的 新 图 形 ， 且 该 图 形 更 具 抽 和 象 性 ; 

@ 第 三 大 类 是 图 像 logo， 指 以 现实 生活 中 存在 的 事物 为 主体 所 制作 的 图 像 ， 产 品类 公司 
网 站 一 般 采 用 这 种 logo。 


目前 ， 网 站 logo 基本 使 用 CSS 样式 代码 来 设计 制作 ， 使 用 CSS 方式 设计 网 站 logo 有 多 种 
实现 方法 ， 下 面 我 们 一 一 举例 。 


1.4.1 添加 网 站 图 像 logo 


下 面 这 段 代码 (参见 源 代码 chapter01/ch01-htmlcomp-logo-png.html 文件 ) 是 一 个 使 用 图 像 
来 实现 的 网 站 logo。 


【示例 1-14】 CSS 之 图 像 网 站 logo 
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在 这 段 HTML 代码 中 ， 网 站 logo 是 通过 CSS 样式 代码 引用 本 地 图 像 来 实现 的 。 下 面 解释 这 
段 代码 : 

第 49 行 通过 span 标签 定义 了 一 个 放置 网 站 logo 的 区 域 ， 并 使 用 class 类 属性 引用 了 属性 值 
为 "logo" 的 CSS 样式 类 ， 同 时 使 用 title 属性 定义 了 "logo" 属 性 值 ; 
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而 名 称 为 "logo" 的 CSS 样式 类 是 在 第 36 一 43 行 中 定义 的 ， 第 39 行 通过 background-image 属 
性 引用 了 本 地 图 像 〈"images/logo.png")， 第 42 行 通过 float 属性 定位 浮动 位 置 为 左 侧 ， 这 样 就 保 
证 了 网 站 logo 的 位 置 居于 页 面 左上 角 ; 

第 52 行使 用 hr 标签 创建 了 一 个 水 平分 割 线 ， 这 样 使 得 第 48 一 51 行 定义 的 div 层 看 上 去 像 
是 页 面 的 标题 栏 ， 第 49 行 定义 的 网 站 logo 和 第 50 行 定义 的 标题 均 位 于 该 标题 栏 内 ; 

下 面 我 们 运行 测试 这 个 页 面 ， 页 面 打 开 后 的 效果 如 图 1.18 所 示 。 我 们 看 到 使 用 CSS 样式 定 
义 的 网 站 logo 显示 出 来 了 ， 使 用 图 像 方式 定义 logo 还 是 很 容易 的 。 


笑 HTML 之 CSS 图 他 logo 
| 国 locahost63342/mml | C QA 挫 寺 


[1 HTML 之 Css 图 像 logo 


HTMML 之 C 5S 图 钱 l0go 


图 1.18 CSS 之 图 像 网 站 logo 效果 图 


1.4.2 ”添加 网 站 文字 logo 


我 们 再 看 一 个 示例 ， 这 段 代 码 (参见 源 代码 chapter01/ch01-htmlcomp-logo-text.html 文件 ) 是 
一 个 使 用 动态 文字 来 实现 的 网 站 logo。 


【示例 1-15】 CSS 之 文字 网 站 logo 
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101 </body> 
102 </html> 


在 这 段 HTML 代码 中 ， 网 站 logo 是 通过 文字 CSS 样式 代码 来 实现 的 。 下 面 解 释 这 段 代码 : 

先 看 第 10 行 ， 这 里 使 用 了 一 个 不 太 常 用 的 语法 @import 引入 了 一 个 名 称 为 "fantasy" 的 文本 
字体 ， 而 引用 该 字体 时 通过 ua 关键 字 定 义 了 一 个 链接 地 址 

(http://fonts.googleapis.com/css?family=fantasy)， 这 表明 其 取 自 于 Google 公司 提供 的 字体 库 ; 之 
所 以 要 引入 这 样 一 个 字体 ， 是 因为 这 段 代码 要 实现 一 个 CSS 样式 的 文本 logo， 使 用 一 种 特殊 风 
格 字体 显示 出 来 会 更 吸引 眼球 ， 另 外 ， 关 于 @import 的 语法 ， 读 者 可 以 参阅 相关 文档 ， 其 使 用 方 
法 类 似 于 link 标签 ， 但 又 不 尽 相 同 ; 

下 面 ， 我 们 看 第 92 一 99 行 ， 这 是 页 面 的 主体 部 分 ， 第 93 行 定义 了 一 个 id 值 为 "logo" 的 span 
标签 ， 这 里 就 是 我 们 要 实现 的 文字 logo; 第 94 行 定义 了 一 段 文字 ， 相 当 于 页 面 标题 ; 第 96 行 
使 用 hr 标签 创建 了 一 个 水 平分 割 线 ， 这 样 使 得 第 92 一 95 行 定义 的 div 层 与 第 97 一 99 行 定义 的 
div 层 隔 离开 来 ， 形 成 了 页 面 标题 栏 和 页 面 正文 部 分 的 效果 ; 

而 第 93 行 定义 id 值 "logo"， 是 在 CSS 样式 代码 部 分 的 第 11 一 39 行 与 第 40 一 62 行 中 实现 
的 ;这 里 主要 使 用 了 文字 渐变 〈"transition") 和 文字 阴影 ("text-shadow") 这 两 个 CSS 3 属性 

(注意 ， 这 两 个 是 CSS 3 版 本 才 支 持 的 属性 ); 渐变 "transition" 属 性 是 指 当 鼠标 放置 于 某 区 域 中 
时 ， 会 产生 宽度 上 的 变化 效果 ， 且 针对 不 同 的 浏览 器 有 不 同 的 定义 方法 ， 在 第 18 一 22 行 和 第 
41 一 45 行 中 进行 了 定义 ， 阴影"text-shadow" 属 性 是 指 为 文字 增加 阴影 效果 ， 在 第 23 一 38 行 和 第 
46 一 61 行 中 进行 了 定义 ; 

下 面 我 们 运行 测试 这 个 页 面 ， 页 面 打开 后 的 效果 如 图 1.19 所 示 。 我 们 看 到 使 用 CSS 样式 定 
义 的 网 站 文字 logo 显示 出 来 了 ， 该 logo 还 具有 动态 效果 ， 当 用 户 将 鼠标 放置 于 该 logo 区 域 中 
时 ， 文 字 会 产生 动态 旋转 效果 ， 如 图 1.20 所 示 。 


EE 
| HTML 之 C5 文字 ogo be | HTML 之 C35 文字 ogo x 加 


二 国 fieWEJWebstompr 7 C Qa 们 | 自 » | 三 后 人 fie///E/Webstompn 7 C QQ 起 过 个 | 自 ? 


. | 
HTML 之 Css 文 字 logo HTML 之 CSS 文 字 Ilogo 


HTWL 之 Css 文字 logo HTML 之 CSs 文 字 logo 


fe//E/Webstormprojects/ html-css-jouery/chapterO l/chOl-htmlcomp-logo-ter ntmlz 


图 1.19 CSS 之 文本 网 站 logo 效果 图 (一 ) 图 1.20 CSS 之 文本 网 站 logo 效果 图 (二 ) 


1.4.3 ”添加 网 站 图 形 logo 


我 们 再 看 一 个 示例 ， 这 段 代 码 〈 参 见 源 代 码 chapter01/ch01-htmlcomp-logo-drawing.html 文 
件 ) 是 一 个 通过 CSS 绘制 图 形 来 实现 的 网 站 logo。 
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【示例 1-16】 CSS 之 图 形 网 站 logo 
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在 这 段 HTML 代码 中 ， 网 站 logo 是 通过 图 形 CSS 样式 代码 来 实现 的 。 下 面 解释 这 段 代码 : 

先 看 第 90 一 101 行 ， 这 里 使 用 柑 套 的 div 层 标签 定义 了 一 组 图 形 ; 

第 90 行为 最 外 面 的 div 层 ， 引 用 了 一 个 CSS 类 (名称 为 "drawing-holder")， 该 CSS 类 的 定 
义 在 第 12 一 16 行 ， 主 要 用 于 实现 一 个 图 形 logo 的 层 〈div) 容器 ; 

第 91 行为 第 二 个 div 层 ， 引 用 了 一 个 CSS 类 (名称 为 "drawing logo")， 注 意 "drawing" 与 
"logo" 之 间 是 空格 ， 这 表明 "logo" 是 "drawing" 的 子 类 ; "drawing" 类 的 定义 在 第 17 一 25 行 ， 定 义 了 
位 置 、 长 宽 、 背 景 、 圆 角 和 边框 及 其 阴影 等 属性 ; "logo" 类 的 定义 在 第 36 一 38 行 ， 定义 了 内 边 
距 属性 ; 

第 92 行为 第 三 个 div 层 ， 引 用 了 一 个 CSS 类 (名称 为 "wrap")， 可 以 将 其 理解 为 一 组 logo 
图 形 的 小 容器 ，"wrap" 类 的 定义 在 第 39 一 43 行 ， 定 义 了 位 置 和 长 宽 属性 ; 

生成 图 形 logo 的 主要 代码 在 第 93 一 97 行 ， 这 里 定义 了 一 组 div 层 ， 引 用 了 相同 的 CSS 类 
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(名 称 为 "logoshape")。"logoshape" 类 的 定义 在 第 4 一 70 行 ， 其 中 第 44 一 54 和 


J 了 是 对 图 形 logo 主 


体 的 定义 ， 不 但 对 位 置 、 尺 寸 背 景色 等 属性 进行 了 定义 ， 还 使 用 旋转 变换 属性 美化 了 logo 图 
形 ， 其 中 rotate 方法 表示 以 图 形 中 心 进行 旋转 ，skew 方法 表示 沿 着 X 轴 进 行 2D 旋转 ,而 第 


55 一 70 行 代码 使 用 伪 类 选择 器 nth-child 对 第 2 个 至 第 5 个 图 形 的 位 置 进行 了 
在 页 面 上 展示 一 组 完整 的 图 形 logo; 


定义 ， 这 样 就 可 以 


第 100 行使 用 div 层 标签 定义 了 图 形 logo 的 文字 描述 部 分 ， 其 引用 了 一 个 CSS 类 (名称 为 
"drawing-name")，"drawing-name" 类 的 定义 在 第 31 一 34 行 ， 主 要 定义 了 字体 属性 。 

下 面 我 们 运行 测试 这 个 页 面 ， 页 面 打 开 后 的 效果 如 图 1.21 所 示 。 我 们 看 到 使 用 纯 CSS 样式 
代码 定义 的 网 站 logo 是 一 个 包含 5 个 小 萎 形 及 一 个 外 部 阴影 的 图 形 ，5 个 小 菱形 呈 梅 花形 状 布 


置 ， 整 体 图 形 logo 十 分 简洁 美观 。 


3 "0% 
HTML 之 CS5 图 flogo x 
€ @fle///E/Webstormprn * C  Q 再 过 分 | 自 » 至 
a HTML 之 CSS 图 形 logo 
1 
a 
LOGO 


图 121 CSS 之 图 形 网 站 logo 效果 图 


下 。 与 ”使 用 脚本 元 素 script 标签 


脚本 存在 的 意思 是 可 以 在 网 页 中 放 入 一 段 动态 代码 ， 让 网 页 能 够 动 起 来 ， 


这 就 是 我 们 常 说 的 


动态 网 页 ， 这 些 动态 代码 我 们 一 般 称 之 为 脚本 语言 代码 。 动 态 网 页 可 以 实现 网 页 与 用 户 的 交互 。 


1.5.1 HTML 网 页 内 由 脚本 让 网 页 动 起 来 


HTML 网 页 中 的 script 标签 是 用 于 定义 脚本 语言 的 ， 主 要 包括 JavaScript、VBScript、 
ecmascript 等 几 种 脚本 语言 ， 目 前 最 流行 的 当然 是 JavaScript 脚本 语言 了 ， 所 以 我 们 提 到 的 嵌入 


脚本 指 的 就 是 嵌入 JavaScript 脚本 。 
在 前 文 1.1 小 节 中 ， 我 们 向 读者 介绍 了 script 标签 的 基本 使 用 方法 ， 这 是 
标签 嵌入 脚本 的 语法 ， 看 下 面 几 行 : 


<script type="text/javascript"> 


</script> 


有 先 明确 使 用 script 


如 果 读 者 想 在 HTML 网 页 中 嵌入 脚本 ， 一 般 需 要 遵循 上 面 的 写法 ， 并 将 脚本 语言 写 在 两 个 
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script 标签 之 间 。 

下 面 我 们 看 一 段 代码 ， 让 读者 体会 使 用 script 标签 嵌入 脚本 的 方法 。 这 段 代 码 〈 参 见 源 代码 
chapter01/ch01-htmlcomp-script-embed.html 文件 ) 是 一 个 在 HTML 网 页 内 不 同位 置 嵌 入 脚本 的 应 
用 ， 这 个 应 用 稍微 有 点 复杂 ， 后 面 我 们 会 做 详细 讲解 。 


【示例 1-17】 HTML 网 页 内 嵌 脚 本 


在 这 段 HTML 代码 中 ， 使 用 的 全 部 是 内 柑 脚 本 。 下 面 解释 这 段 代码 : 

先 看 第 14 一 18 行 ， 这 里 是 一 段 内 嵌 在 head 标签 中 的 脚本 代码 。 其 中 ， 第 15 行使 用 
document.write() 方 法 尝试 向 HTML 网 页 中 写 入 一 行 日 志 ， 因 为 调用 documentwrite() 方 法 将 会 打 
开 一 个 输出 流 ， 所 以 在 第 16 行使 用 document.close0 方 法 对 其 进行 了 关闭 (建议 读者 予以 重 
视 ); 第 17 行使 用 document.getElementById() 方 法 尝试 在 一 个 div 标签 (id 值 为 "id-div-script"， 
在 第 26 行 中 定义 ) 内 插入 一 段 文本 ; 

然后 看 第 28 一 33 行 ， 这 里 是 一 段 内 嵌 在 body 标签 中 的 脚本 代码 ; 其中， 第 29 一 30 行使 用 
document write() 方 法 打开 一 个 输出 流 尝试 向 HTML 网 页 中 写 入 一 行 日 志 并 动态 创建 了 一 个 div 
标签 (id 值 为 "id-div-dynamic")， 并 在 第 31 行使 用 document.close() 方 法 关闭 了 该 输出 流 ， 第 32 
行使 用 document.getElementById() 方 法 尝试 在 这 个 动态 创建 的 div 标签 内 插入 一 段 文本 ; 

最 后 看 第 37 一 41 行 ， 这 里 同样 是 一 段 内 嵌 在 body 标签 中 的 脚本 代码 ， 其 中 ， 第 38 行使 用 
document write() 方 法 打开 一 个 输出 流 尝 试 向 HTML 网 页 中 写 入 一 行 日 志 ， 并 在 第 39 行使 用 
document.close() 方 法 关闭 了 该 输出 流 ; 第 40 行使 用 document.getElementById() 方 法 尝试 在 一 个 
div 标签 (id 值 为 "id-div-body"， 在 第 35 行 中 定义 ) 内 插入 一 段 文本 。 

下 面 我 们 运行 测试 这 个 页 面 ， 效 果 如 图 1.22 所 示 。 

| 
HTML 之 岁入 式 script 
[header script log: 
Sript log: 
~ script 
Script log: 
~ seript 


og: body -seript 


1.22 HTML 网 页 内 网 脚本 效果 图 


构建 移动 网 站 与 APP: HTML 5+CSS 3+jQuery Mobile 入 门 与 实战 


从 图 1.22 中 看 到 页 面 中 输出 的 信息 比较 多 ， 下 面 我 们 针对 图 中 输出 结果 进行 详细 的 解释 : 

最 先 输出 的 是 一 行 日 志 信 息 ， 通 过 查看 【示例 1-17】 代 码 知 道 是 第 15 行 中 输出 的 ， 而 上 图 
中 第 二 行 输出 的 信息 是 第 23 行 定义 的 ， 可 见 在 head 标签 之 间 定 义 的 第 14 一 18 行 脚 本 代码 最 先 
被 编译 执行 了 ， 是 先 于 HTML 网 页 DOM 树 被 解析 之 前 就 执行 了 ， 这 完全 是 基于 在 HTML 网 页 
定义 的 JavaScript 脚本 语言 编译 执行 一 项 基本 原则 ， 即 “ 按 顺 序 载 入 ， 载 入 即 执行 ” 而 第 17 行 
脚本 代码 尝试 在 div 标签 (id 值 为 "id-div-script") 中 插入 文本 信息 的 操作 却 没有 显示 ， 上 图 中 第 
三 行 输出 的 div 标签 〈 带 细 线 边框 风格 ) 没有 发 生 预 期 的 改变 ， 这 是 因为 该 标签 是 在 第 26 行 定 
义 的 ， 是 在 脚本 操作 之 后 ， 相 当 于 操作 时 还 没有 被 定义 ; 

然后 ， 页 面 第 四 行 输出 也 是 一 行 日 志 信 息 ， 通 过 查看 【示例 1-17】 代 码 知 道 是 第 29 行 中 输 
出 的 ; 之 后 上 图 页 面 中 第 五 行 显示 的 是 第 30 行动 态 创建 的 div 标签 (id 值 为 "id-div-dynamic"， 
带 细 线 边框 风格 )， 而 第 32 行 尝试 在 动态 创建 的 div 标签 中 插入 文本 的 操作 也 成 功 显示 了 ， 见 上 
图 页 面 中 第 六 行 的 文本 输出 ; 

最 后 ， 上 图 页 面 中 第 七 行 显示 的 是 第 35 行 定义 的 div 标签 (id 值 为 "id-div-body"， 带 细 线 边 
框 风格 )， 而 第 40 行 尝试 在 该 div 标签 中 插入 文本 的 操作 也 成 功 显 示 了 ， 见 上 图 页 面 中 第 八 行 的 
文本 输出 ， 上 图 页 面 第 九 行 输出 也 是 一 行 日 志 信息 ， 通 过 查看 【示例 1-17】 代 码 知道 是 第 38 行 
中 输出 的 ， 虽 然 第 38 行 定义 在 第 40 行 之 前 ， 也 会 被 先 于 第 40 行 执行 ， 但 由 于 id 值 为 "id-div- 
body" 的 div 标签 是 在 第 35 行 中 定义 的 ， 所 以 第 38 行 定义 的 文本 信息 是 最 后 被 显示 输出 的 。 

通过 上 面 的 分 析 ， 读 者 会 对 HTML 网 页 中 定义 的 JavaScript 脚本 语言 的 编译 执行 顺序 有 一 个 
初步 了 解 。JavaScript 脚本 执行 顺序 需要 遵循 以 下 几 个 大 的 原则 : 

@ 按 顺序 载 入 ; 

@ 。 载 入 即 执行 ; 

@ 执行 时 会 阻塞 后 续 内容 。 

所 以 ， 为 了 避免 第 17 行 没有 被 有 效 执行 的 情况 出 现 ， 一 般 建议 将 自 定义 脚本 放 在 body 标签 
的 最 后 (或 HTML 网 页 最 后 )， 这 样 可 以 保证 全 部 HTML 网 页 DOM 树 载 入 后 ， 再 执行 脚本 。 
当然 ，JavaScript 语言 实际 运用 时 非常 复杂 ， 上 面 的 几 个 原则 也 是 最 基本 的 ， 读 者 可 以 自行 深入 
研究 。 


1.5.2” 载 入 外 部 脚本 库 


这 一 小 节 我 们 介绍 载 入 外 部 脚本 库 的 方法 ， 这 里 先 明确 使 用 script 标签 载 入 外 部 脚本 库 的 语 
法 ， 看 下 面 这 行 : 
<script type="text/javascript" src="url.js"></script> 


如 果 读 者 想 在 HTML 网 页 中 载 入 外 部 脚本 库 ， 一 般 需 要 遵循 上 面 的 写法 ， 并 建议 放 在 head 
标签 之 内 。 
下 面 我 们 看 一 段 载 入 外 部 脚本 库 的 代码 ， 这 段 代码 (参见 源 代码 chapter01/ch01-htmlcomp- 
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script-src.html 文件 ) 是 一 个 在 HTML 网 页 内 载 入 外 部 脚本 库 的 应 用 。 
【示例 1-18】 HTML 网 页 载 入 外 部 脚本 


在 这 段 HTML 代码 中 ， 使 用 的 是 载 入 外 部 脚本 的 方法 。 下 面 解释 这 段 代 码 ; 

第 14 行使 用 script 标签 载 入 了 一 个 外 部 脚本 ， 其 中 通过 sre 属性 定义 了 该 脚本 的 路 径 为 
"js/srejs" ， 该 路 径 是 一 个 基于 本 HTML 网 页 的 相对 路 径 ， 将 其 转换 成 绝对 路 径 为 
"chapterO1/js/src.js"。 

下 面 这 段 脚 本 代码 (参见 源 代码 chapter01/js/srejs 文件 ) 是 【示例 1-18】HTML 代码 中 载 入 
外 部 脚本 库 。 


【示例 1-19】 HTML 网 页 载 入 外 部 脚本 代码 


在 这 段 HTML 代码 中 ， 使 用 的 全 部 是 内 幅 脚 本 。 下 面 解释 这 段 代 码 : 
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先 看 第 14 一 18 行 ， 第 02 行使 用 document.getElementById() 方 法 尝试 在 一 个 div 标签 (id 值 
为 "id-div-body"， 在 【示例 1-18】 第 22 行 中 定义 ) 内 插入 一 段 文本 。 

下 面 我 们 运行 测试 这 个 页 面 ， 页 面 打 开 后 的 效果 如 图 1.23 所 示 。 第 02 行 脚本 代码 定义 的 操 
作成 功 显示 出 来 了 ， 可 见 外 部 脚本 与 嵌入 脚本 执行 效果 是 完全 一 样 的 。 


图 123 HTML 网 页 载 入 外 部 脚本 效果 图 


1.5.3 ”推迟 脚本 执行 


在 前 面 1.5.1 小 节 中 ， 我 们 介绍 过 脚本 语言 定义 在 标签 前 面 而 导致 操作 失效 的 代码 ， 这 一 小 
区 我 们 给 出 推迟 脚本 执行 的 方法 。 通 过 在 script 标签 中 增加 一 个 defer 属性 ， 就 可 以 实现 推迟 脚 
本 执行 的 功能 。 使 用 defer 属性 的 语法 ， 看 下面 这 行 : 


xscript type-"text/javascript" src-"url.js" defer></script> 
如 果 读 者 想 在 HTML 网 页 中 推迟 脚本 执行 ， 一 般 需要 遵循 上 面 的 写法 ， 并 与 sre 属性 结合 
使 用 。 
下 面 我 们 看 一 段 推迟 脚本 执行 的 代码 ， 这 段 代 码 〈 参 见 源 代码 chapter01/ch01-htmlcomp- 
script-defer.html 文件 ) 是 一 个 在 HTML 网 页 内 测试 推迟 脚本 执行 的 应 用 。 


【示例 1-20】 HTML 网 页 推迟 脚本 执行 


在 这 段 HTML 代码 中 ， 主 要 载 入 了 两 个 外 部 脚本 ， 其 中 一 个 是 使 用 defer 属性 定义 的 ， 而 另 
一 个 则 没有 使 用 defer 属性 ， 下 面 我 们 分 析 这 段 代码 : 

第 21 行使 用 script 标签 载 入 了 一 个 外 部 脚本 ， 其 中 通过 src 属性 定义 了 该 脚本 的 路 径 为 
"js/nodeferjs"， 注 意 并 没有 使 用 defer 属性 ; 

第 26 行 同样 使 用 script 标签 载 入 了 一 个 外 部 脚本 ， 其 中 通过 src 属性 定义 了 该 脚本 的 路 径 为 
"js/deferjs"， 注 意 其 添加 了 defer 属性 ; 

第 31 一 40 行 主要 是 获取 了 两 个 script 标签 的 defer 属性 值 ， 测 试 定义 与 不 定义 defer 属性 的 
script 标签 取 何 值 。 


构建 移动 网 站 与 APP: HTML 5+CSS 3+jQuery Mobile 入 门 与 实战 


下 面 这 段 脚本 代码 〈 参 见 源 代 码 chapter01/js/nodeferjs 文件 ) 是 【示例 1-20】 中 第 21 行 代 
码 中 载 入 外 部 脚本 库 。 


【示例 1-21】 HTML 网 页 推迟 脚本 执行 脚本 代码 (一) 


这 段 脚本 代码 尝试 在 div 标签 (id 值 为 "id-div-nodefer"， 在 【示例 1-20】 中 第 24 行 定义 ) 中 
插入 文本 信息 。 

下 面 这 段 脚本 代码 〈 参 见 源 代 码 chapter01/js/deferjs 文件 ) 是 【示例 1-20】 中 第 26 行 代码 
中 载 入 外 部 脚本 库 ， 其 主要 代码 如 下 。 


【示例 1-22】 HTML 网 页 推迟 脚本 执行 脚本 代码 (二) 


这 段 脚本 代码 尝试 在 div 标签 〈id 值 为 "id-div-defer"， 在 【示例 1-20】 中 第 29 行 定义 ) 中 插 
入 文本 信息 。 

下 面 我 们 运行 测试 这 个 页 面 ， 效 果 如 图 1.24 所 示 。【 示 例 1-22】 中 脚本 代码 的 操作 成 功 显示 
出 来 了 ， 而 【示例 1-21】 中 脚本 代码 的 操作 却 没有 显示 出 来 ， 可 见 定义 了 defer 属性 的 外 部 脚本 
是 可 以 推迟 执行 的 ， 同 时 ， 定 义 了 defer 属性 的 script 标签 取 值 为 tue， 而 没有 定义 defer 属性 的 
script 标签 取 值 为 false， 通 过 判断 该 值 也 可 以 判定 脚本 在 何 时 被 执行 。 


宕 HTML 之 推迟 肝 本 执行 X 


霹 图 localhost63342/html 7 CQ 起 过 2 | 至 


HTML 之 推迟 脚本 执行 


no defer script log: 
defer value is false 


defer script log: 


defer value is true 
defer added. 


1.24 HTML 网 页 推迟 脚本 执行 效果 图 
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1.5.4 ”异步 执行 脚本 


在 前 面 1.5.1 小 节 中 ， 我 们 介绍 过 脚本 会 以 阻塞 方式 运行 ， 有 些 时 候 这 并 不 是 我 们 想 要 的 效 
果 。 这 一 小 节 我 们 给 出 异步 执行 脚本 的 方法 ， 通 过 在 script 标签 中 增加 一 个 async 属性 ， 就 可 以 
实现 异步 执行 脚本 的 功能 。 使 用 async 属性 的 语法 ， 看 下 面 这 行 : 


<script type-"text/javascript" src-"url.je" async></script 
如 果 读 者 想 在 HTML 网 页 中 异步 执行 脚本 ， 一 般 需要 遵循 上 面 的 写法 ， 并 与 sre 属性 结合 
使 用 。 
下 面 我 们 看 一 段 异 步 执行 脚本 的 代码 ， 这 段 代 码 (参见 源 代码 chapter01/ch01-htmlcomp- 
script-async.html 文件 ) 是 一 个 在 HTML 网 页 内 异步 执行 脚本 的 应 用 。 


【示例 1-23】 HTML 网 页 异步 执行 脚本 
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在 这 段 HTML 代码 中 ， 主 要 载 入 了 两 个 外 部 脚本 ， 其 中 一 个 是 使 用 async 属性 定义 的 ， 而 
另 一 个 则 没有 使 用 async 属性 ， 下 面 我 们 向 读者 分 析 这 段 代 码 : 

第 21 行使 用 script 标签 载 入 了 一 个 外 部 脚本 ， 其 中 通过 src 属性 定义 了 该 脚本 的 路 径 为 
"js/noasyncjs"， 注 意 并 没有 使 用 async 属性 ; 

第 22 行 同样 使 用 script 标签 载 入 了 一 个 外 部 脚本 ， 其 中 通过 src 属性 定义 了 该 脚本 的 路 径 为 
"js/asyncjs"， 注 意 其 添加 了 async 属性 ; 

下 面 这 段 脚本 代码 (参见 源 代码 chapter01/js/noasyncjs 文件 ) 是 【示例 1-23】 中 第 21 行 代 
码 中 载 入 外 部 脚本 库 。 


【示例 1-24】 HTML 网 页 异步 执行 脚本 代码 (一) 


下 面 这 段 脚 本 代码 (参见 源 代码 chapter01/js/asyncjs 文件 ) 是 【示例 1-23】 中 第 22 行 代码 
中 载 入 外 部 脚本 库 。 


【示例 1-25】 HTML 网 页 异步 执行 脚本 代码 (二) 


下 面 我 们 运行 测试 这 个 页 面 ， 页 面 打开 后 的 效果 如 图 1.25 所 示 。 


EE 说. x 


委 Blocalhost:63342/html-css-jq ™ X 


1.25 HTML 网 页 异步 执行 脚本 效果 图 (一) 


从 图 1.25 中 看 到 ,【 示 例 1-24】 中 脚本 代码 的 警告 消息 框 先 被 显示 出 来 ， 而 【示例 1-23】 中 
第 25 一 32 行 定义 的 页 面 内 容 却 没有 显示 出 来 ， 可 见 【示例 1-23】 中 第 21 行 定义 的 外 部 脚本 是 
以 阻塞 方式 执行 的 。 
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第 1 章 网 页 的 架构 基础 


下 面 我 们 继续 单 击 消息 框 中 的 “确定 ”按钮 ， 接 着 运行 这 个 页 面 ， 之 后 的 效果 如 图 1.26 所 示 。 
fi a - oo 
€ @ localhost63342/html-css-jqa X QQ 殖 专 


图 1.26 HTML 网 页 异步 执行 脚本 效果 图 (二 ) 


从 图 1.26 中 看 到 ,【 示 例 1-25】 中 脚本 代码 的 警告 消息 框 先 被 显示 出 来 ， 同 时 【示例 1-23】 
中 第 25 一 32 行 定义 的 页 面 内 容 也 显示 出 来 ， 可 见 【 示 例 1-23】 中 第 22 行 定义 的 外 部 脚本 是 以 
异步 方式 执行 的 。 


下 面 我 们 继续 单 击 消息 框 中 的 “确定 ”按钮 ， 接 着 运行 这 个 页 面 ， 之 后 的 效果 如 图 1.27 
所 示 。 


= BH Xx 
由 HTML 之 的 各 本 x RE 
各 @localhost:63342/html-css-jq ” C QQ 规 雪 


HTML 之 异步 雪 疗 计 丰 


说 明 : async 属 性 规定 一 旦 脚本 可 用 , 则 会 异步 执行 


备注 : async 属 性 仅 适用 于 外 部 脚本 ( 只 有 在 使 用 src 属性 时 ) . 


图 1.27 HTML 网 页 异步 执行 脚本 效果 图 (三) 
对 比 图 1.26 与 图 1.27 可 以 看 到 ， 通 过 async 属性 定义 脚本 是 以 异步 方式 加 载 执行 的 ， 使 用 
async 属性 可 以 大 大 丰富 网 页 脚本 的 设计 手段 。 


另外 ，async 属性 与 defer 属性 具有 一 定 的 关联 性 ， 根 据 HTML 4 官方 文档 的 解释 说 明 ， 二 
者 存在 以 下 关系 : 


@ ”如 果 定义 async， 脚 本 相对 于 页 面 的 其 余部 分 异步 执行 ( 当 页 面 继续 进行 解析 时 ， 脚 本 
将 被 执行 ) ; 
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@。 如 果 不 定 义 async， 但 是 定义 defer， 肢 本 将 在 页 面 完成 解析 时 执行 ; 

@@ ”如 果 既 不 定义 async 也 不 定义 defer， 则 在 浏览 器 继续 解析 页 面 之 前 ， 立 即 以 阻塞 方式 
读 取 并 执行 脚本 。 

读者 可 以 参考 相关 文档 ， 进 行 深入 的 学 习 了 解 。 


‖.@ 使 用 noscript 标签 判断 浏览 器 是 否 支持 脚本 


本 节 我 们 介绍 noscript 标签 ， 它 是 用 于 判断 浏览 器 是 否 支持 脚本 语言 功能 的 ， 如 果 浏 览 器 不 
支持 脚本 语言 ， 则 浏览 器 会 将 noscript 标签 中 内 容 显 示 出 来 。 
我 们 先 看 一 下 使 用 noscript 标签 的 语法 : 


如 果 读 者 想 在 HTML 网 页 中 使 用 noscript 标签 判断 浏览 器 是 否 支 持 脚 本 语言 ， 一 般 需要 遵 
循 上 面 的 写法 。 

下 面 我 们 看 一 段 使 用 noscript 标签 的 代码 ， 这 段 代码 (参见 源 代码 chapter01/ch01-htmlcomp- 
noscript.html 文件 ) 是 在 HTML 网 页 内 使 用 noscript 标签 的 方法 。 


【示例 1-26】HTML 网 页 内 使 用 noscript 标签 


在 这 段 HTML 代码 中 ， 第 12 行使 用 noscript 标签 定义 了 一 行文 本 ， 如 果 浏览 器 不 支持 脚本 
语言 ， 则 该 行文 本 会 被 显示 出 来 。 
下 面 我 们 运行 测试 这 个 页 面 ， 效 果 如 图 1.28 所 示 。 
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从 图 1.28 中 可 看 到 ，noscript 标签 并 没有 生效 ， 看 起 来 目前 默认 不 支持 脚本 语言 的 浏览 器 几 
乎 绝迹 了 。 不 过 没关系 ， 我 们 可 以 通过 设置 浏览 器 的 配置 或 者 添加 禁用 脚本 语言 的 插件 ， 来 实现 
测试 效果 。 壁 如 笔者 为 FireFox 浏览 器 添加 了 一 款 名 为 NoScript 的 插件 ， 就 全 面 禁 止 了 脚本 语言 
功能 ， 当 然 读 者 也 可 以 使 用 别 的 方法 。 

下 面 我 们 再 次 运行 测试 这 个 页 面 ， 效 果 如 图 1.29 所 示 。 浏 览 器 在 禁用 脚本 语言 功能 后 ， 
noscript 标签 立即 生效 了 ， 提 示 用 户 浏览 器 不 支持 JavaScript 脚本 语言 。 


电 HTML 之 noscript 标 冬 元 素 XxX 中 国人 到 是 HTML 之 noscripdF 和 元素 xX 中 画 > 
各 图 localhost63342/html-esjq r QQ 失去 » 三 | € @localhost6334. 5qv| @ QQ 闪 寺 » 三 
HTML 之 noscript 标 签 元 素 HTML 之 noscript 标 签 元 素 
不 支持 JjavaScript 的 浏览 器 梅 品 示 noscript 元 素 中 的 文本 。 Sorry, your browser does not support JavaScript! 
不 支持 JavaScript 的 浏览 器 将 显示 noscript 元 素 中 的 文本 。 
图 1.28 使 用 noscript 标签 效果 图 (一 ) 图 1.29 ”使 用 noscript 标签 效果 图 (一 ) 


e 7 为 标签 添加 id、name 或 class 属性 


当 我 们 在 设计 一 些 大 型 网 页 时 ， 网 页 中 会 有 多 个 相同 的 标签 ， 如 有 很 多 行文 字 时 ， 我 们 可 能 
会 有 很 多 个 DIV。 为 了 识别 每 个 DIV， 我 们 需要 为 这 个 DIV 添加 几 个 属性 : id、name， 如 果 要 
让 这 几 个 DIV 都 具备 相同 的 样式 ， 那 就 要 添加 class 属性 来 引入 CSS 样式 。 


1.7.1 为 标签 添加 id 属性 


在 HTML 规范 中 ， 标 签 的 id 属性 必须 是 唯一 的 ，id 是 英文 单词 identity (一 般 翻 译 为 身份 标 
识 ) 的 缩写 ， 读 者 可 以 这 样 理 解 : 既然 是 身份 标识 ， 那 就 必须 是 唯一 的 ， 这 样 才 可 以 与 其 他 对 象 
区 别 开 来 。 

在 HTML 网 页 中 id 属性 是 非常 有 用 的 ， 通 过 id 属性 可 以 定义 锚 链 接 (link anchor)， 可 
以 通过 JavaScript 脚本 操作 对 象 ， 还 可 以 通过 CSS 样式 表 为 带 有 指定 id 的 对 象 添加 或 修改 样 

下 面 我 们 看 一 段 操作 id 属性 的 代码 ， 这 段 代 码 〈 参 见 源 代 码 chapter01/ch01-htmlcomp-ele- 
idhtml 文件 ) 是 一 个 通过 标签 id 属性 添加 内 容 的 操作 方法 ， 也 是 比较 常见 的 一 种 操作 。 

【示例 1-27】 为 标签 添加 id 属性 

01 <!DOCTYPE html> 

02 <html lang="en"> 
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在 这 段 HTML 代码 中 ， 第 22 行 与 第 23 行 定 义 了 两 个 同样 的 div 标签 ， 不 同 的 地 方 是 第 23 
行 定义 div 标签 添加 了 id 属性 〈 属 性 值 为 "id-div") 作为 其 唯一 标识 ， 第 25 行 脚本 代码 使 用 
document.getElementById() 方 法 为 第 23 行 定义 的 div 标签 动态 追加 了 文本 “操作 id”。 

下 面 我 们 运行 测试 这 个 页 面 ， 效 果 如 图 1.30 所 示 。 从 中 可 以 看 到 ， 如 果 标 签 定义 了 id 属性 
就 可 以 对 其 进行 操作 ， 来 完成 一 些 动态 效果 。 


基 HTML 之 标 竺 元 素 id x 


€ @localhost:63342/html 了 


图 1.30 为 标签 添加 id 属性 
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1.7.2 为 标签 添加 name 属性 


在 HTML 规范 中 ，name 属性 主要 是 用 于 定义 表单 域内 标签 的 ， 壁 如 input、select、 
textarea、iframe、frame、window、button 等 ， 这 些 标签 都 与 表单 提交 相关 ， 一 般 服务 器 端 只 
接收 表单 内 具有 name 属性 的 元 素 ， 所 以 仅仅 具有 id 属性 的 标签 是 无 法 通过 表单 服务 器 端 接 
收 的 。 

另外 ， 我 们 知道 radio 类 标签 必须 在 同一 个 分 组 中 ， 且 “check” 操 作 是 互 斥 的 ， 即 同一 时 间 
只 能 选中 一 个 radio 标签 ， 所 以 这 个 分 组 就 是 根据 相同 的 name 属性 来 实现 的 。 

最 后 ，name 属性 与 id 属性 类 似 ， 同 样 可 以 定义 锚 链接 (link anchor)， 可 以 通过 JavaScript 
脚本 操作 对 象 ， 通 过 CSS 样式 表 为 带 有 指定 name 的 对 象 添加 或 修改 样式 ， 等 等 。 

我 们 先 看 一 段 操作 name 属性 的 代码 ， 这 段 代 码 〈 参 见 源 代码 chapter01/ch01-htmlcomp-ele- 
name.html 文件 ) 是 一 个 通过 标签 name 属性 获取 数组 长 度 的 操作 方法 。 


【示例 1-28】 为 标签 添加 name 属性 
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在 这 段 HTML 代码 中 ， 第 22 一 26 行 定义 了 一 组 具有 相同 的 name 属性 的 input 标签 〈 属 性 
值 为 name-input") 作为 标识 ， 第 29 一 30 行 脚本 代码 通过 length 属性 获取 了 这 组 input 标签 的 长 
度 ， 并 将 数组 长 度 值 显示 在 第 27 行 定义 的 input 标签 中 。 

下 面 我 们 运行 测试 这 个 页 面 ， 效 果 如 图 1.31 所 示 。 从 图 中 可 以 看 到 ， 第 22 一 26 行 定义 的 一 
组 input 标签 共 5 个 ， 且 具有 相同 的 name 属性 ， 第 29 行 脚本 代码 通过 length 属性 获取 的 数组 长 
度 与 定义 的 是 一 致 的 。 


图 1.31 为 标签 添加 name 属性 


下 面 我 们 来 看 一 段 关 于 定义 radio 类 型 input 标签 的 代码 。 如 果 想 定义 一 组 具有 互 斥 功能 的 
选项 的 话 ， 最 好 的 方法 就 是 使 用 radio 类 型 input 标签 ， 这 样 用 户 选择 选项 时 只 能 选中 其 中 一 
个 ， 也 就 是 单项 选择 。 这 段 代码 (参见 源 代 码 chapter0l/ch01-htmlcomp-ele-radio.html 文件 ) 是 一 
个 通过 标签 name 属性 定义 radio 标签 的 方法 。 


【示例 1-29】 定 义 radio 类 型 的 input 标签 


在 这 段 HTML 代码 中 ， 第 22 一 26 行 定义 了 一 组 radio 类 型 的 input 标签 ， 且 具有 相同 的 
name 属性 (属性 值 为 "mame-radio"〉 作 为 标识 ， 这 一 组 input 标签 其 实 就 是 一 组 单项 选择 。 注 
意 ， 这 里 name 属性 必须 具有 相同 的 属性 值 ， 否 则 单项 选择 功能 是 无 法 实现 的 。 

下 面 我 们 运行 测试 这 个 页 面 ， 效 果 如 图 1.32 所 示 。 读 者 可 以 测试 这 个 页 面 ， 每 次 只 能 选择 

门 编程 语言 ， 也 就 是 说 当选 择 另 一 个 选项 时 ， 之 前 默认 选择 的 选项 会 被 清除 。 


二 图 localhost65542/html Y CG QQ 理 南 » 


HTML 之 标签 元 素 name 


jQuery 
jQuery Mobile 


132 ”定义 radio 类 型 的 input 标签 
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1.7.3 为 标签 添加 class 属性 


在 HTML 规范 中 ， 标 签 的 class 属性 用 于 定义 类 名 ， 一 般 该 类 名 也 就 是 指向 CSS 样式 表 中 
定义 的 类 (class )。 那 么 ， 既 然 CSS 样式 表 中 的 类 可 以 被 定义 于 标签 ， 我 们 就 可 以 通过 
JavaScript 脚本 语言 对 其 进行 增加 、 修 改 或 删除 ， 实 现 动 态 改 变样 式 类 的 功能 。 

当然 ， 读 者 需要 注意 不 是 全 部 标签 均 可 以 使 用 class 属性 ， 壁 如 base、html、head、script、 
style、title 等 标签 是 不 支持 该 属性 的 。 

下 面 我 们 看 一 段 定义 并 操作 class 属性 的 代码 ， 这 段 代码 (参见 源 代码 chapter01/ch01- 
htmlcomp-ele-class.html 文件 ) 是 一 个 通过 脚本 语言 定义 和 修改 标签 class 属性 改变 CSS 样式 的 方 
法 ， 也 是 比较 常规 的 一 种 操作 方法 。 


【示例 1-30】 为 标签 添加 class 属性 
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在 这 段 HTML 代码 中 ， 通 过 定义 和 操作 标签 的 class 属性 ， 实 现 了 动态 改变 CSS 样式 的 效 
果 。 下 面具 体 分 析 : 

第 07 一 12 行 、 第 13 一 18 行 与 第 19 一 24 行 分 别 定义 了 三 个 关于 p 标签 的 CSS 样式 类 ， 名 称 
分 别 为 classnormal、classitalic 和 classbold 这 三 个 样式 类 风格 基本 一 致 ， 不 同 的 地 方 是 字体 不 一 
样 ， 分 别 是 normal、italic 和 bold 三 种 字体 ; 

第 33 一 43 行 定义 了 三 个 button 标签 ， 分 别 用 于 执行 三 个 脚本 函数 ， 来 完成 动态 修改 字体 的 
功能 。 其 中 ， 第 34 行 定义 的 on_normal_click() 函 数 在 第 51 一 55 行 脚 本 代码 实现 ; 第 37 行 定义 
的 on_italic_click() 函 数 在 第 56 一 60 行 脚本 代码 实现 ， 第 40 行 定义 的 on_bold_click() 函 数 在 第 
61 一 65 行 脚本 代码 实现 ; 

第 45 一 49 行 定义 了 一 组 p 标签 ， 并 增加 了 class 属性 ， 其 初始 属性 值 定义 为 "classnormal"， 
该 样式 类 在 上 面 的 第 07 一 12 行 中 定义 ; 

下 面 我 们 运行 测试 这 个 页 面 ， 效 果 如 图 1.33 所 示 。 从 中 可 以 看 到 ， 第 45 一 49 行 中 一 组 p 标 
签 定义 的 class="classnormal" 属 性 值 的 效果 ， 全 部 字体 均 为 “normal” 样 式 。 

下 面 我 们 单 击 名 称 为 “change to italic style” 的 button 标签 按钮 ， 运 行 测试 一 下 ， 页 面 变化 
的 效果 如 图 1.34 所 示 。 可 以 看 到 ， 一 组 p 标签 的 字体 风格 全 部 改变 为 class="classitalic" 属 性 值 的 
效果 ， 这 是 因为 第 58 行 脚本 代码 通过 className 属性 改变 了 一 组 p 标签 的 class 属性 值 。 


电 HTML 之 本 元 素 dass 。。 X 映 HIMLZ 村 元 束 cass Xx 

特力 localhost63342/html 7 CQ 埋 开 2 至 所 转 loaalhost63342/html v CC QQ 埋 » 号 
HTML 之 标签 元 素 class HTML 之 标签 元 素 class 

change to normal style 。 changeto talic style | change to bold style | change to normal syle | [change to tahic style | change to bold style 
HTML 之 标签 元 素 class HTML 之 标 革 元 志 class 

HTML 之 标签 元 素 class HTML 之 标 区 元 志 class 

HTML 之 标 等 元 素 class HTML 之 奈 下 元 下 class 

HTML 之 标签 元 素 class HTML 之 标签 元 霖 class 

HTML 之 标签 元 素 class HTML 之 标 于 元 志 class 

133 为 标签 添加 class 属性 (一) 134 为 标签 添加 class 属性 (二) 


下 面 我 们 单 击 名 称 为 “change to italic bold” 的 button 标签 按钮 ， 运 行 测试 一 下 ， 页 面 变化 
的 效果 如 图 1.35 所 示 ， 一 组 p 标签 的 字体 风格 全 部 改变 为 class="classbold" 属 性 值 的 效果 ， 同 
样 ， 这 是 因为 第 63 行 脚本 代码 通过 className 属性 再 次 改变 了 一 组 p 标签 的 class 属性 值 。 如 果 
我 们 再 单 击 名 称 为 “change to italic normal” 的 button 标签 按钮 ， 页 面 将 会 返回 初始 的 效果 ， 如 
图 1.33 所 示 。 
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€ 图 localhost63342/html Y C QQ 理 垃 
HTML 之 标签 元 素 class 
change to ftalic style 


1.35 ”为 标签 添加 class 属性 (三) 


.号 为 标签 添加 title 属性 


本 节 我 们 向 读者 介绍 title 属性 的 使 用 方法 。 前 文 介绍 head 标签 时 有 讲 到 在 HTML 网 页 头 部 
使 用 title 标签 的 方法 ， 而 本 节 介 绍 的 title 属性 与 title 标签 是 完全 不 同 的 。 

在 标签 内 使 用 title 属性 相当 于 为 该 标签 附加 上 提示 信息 ， 其 表现 形式 为 当 鼠 标 移 到 该 标签 
区 域 时 ， 会 显示 出 一 个 工具 条 提示 信息 文本 (tooltip text)。 

我 们 先 看 一 下 为 标签 添加 title 属性 的 语法 : 


如 果 读 者 想 为 标签 添加 title 属性 ， 一 般 需 要 遵循 上 面 的 写法 。 
下 面 我 们 看 一 段 为 标签 添加 tile 属性 的 代码 ， 这 段 代 码 (参见 源 代码 chapter01/ch01- 
htmlcomp-title.html 文件 ) 是 一 个 在 HTML 网 页 内 为 标签 添加 title 属性 的 方法 。 


【示例 1-31】 HTML 网 页 为 标签 添加 title 属性 


构建 移动 网 站 与 APP: HTML 5+CSS 3+jQuery Mobile 入 门 与 实 


在 这 段 HTML 代码 中 ， 第 24 行为 abbr 标签 添加 了 title 属性 ， 其 中 abbr 标签 属性 用 于 标记 
一 个 缩写 ; 在 HTML 标准 规范 中 ，abbr 标签 使 用 全 局 的 title 属性 ， 同 时 也 是 必须 配合 title 属性 
来 使 用 的 ， 这样， 当 上 鼠标 移 到 abbr 缩写 区 域 上 时 ， 就 可 以 提示 该 缩写 的 完整 内 容 。 

下 面 我 们 运行 测试 这 个 页 面 ， 并 将 鼠标 移 到 “CSS” 缩 写 上 ， 效 果 如 图 1.36 所 示 。 


二 入 localhost63342/html 团 喇 " | QBsing<ivik> 2 三 


HTML 之 为 标签 元 素 添加 title 属 性 
层 色 样式 夫 ( CSS ) 目前 是 新 版 太 为 CSS3 
进 尘 到 Cascading Syle Sheets 

才 单 提交 : 

用 户 名 : 

室 码 : 


1.36 HTML 网 页 内 为 abbr 标签 添加 title 属性 


54 


第 1 章 网 页 的 架构 基础 


从 图 1.36 中 看 到 ， 当 鼠标 移 到 “CSS” 缩 写 上 时 ， 其 完整 内 容 “Cascading Style Sheets” 就 
会 以 工具 条 提示 信息 的 方式 自动 显示 出 来 。 

接着 看 【示例 1-31】 这 段 HTML 代码 ， 第 27 行为 超 链 接 (a) 标签 添加 了 tite 属性 ; 在 HTML 
标准 规范 中 ， 一 般 建议 a 标签 也 添加 title 属性 ， 这 样 是 为 了 给 用 户 提供 更 多 的 提示 信息 。 

下 面 ， 我 们 接着 将 鼠标 移 到 超 链 接 “ 链 接 到 ...” 区 域 上 ， 页 面 效果 如 图 1.37 所 示 。 当 鼠标 移 到 
“链接 到 .….” 区 域 上 时 ， 其 提示 信息 “链接 到 ..….” 同 样 以 工具 条 提示 信息 的 方式 自动 显示 出 来 。 最 
后 ， 我 们 接着 将 鼠标 移 到 表单 区 域 中 的 输入 框 区 域 ， 页 面 效 果 如 图 1.38 所 示 。 当 鼠标 移 到 “用 户 
名 ”输入 框 区 域 中 时 ， 其 提示 信息 “请 输入 用 户 名 ”同样 以 工具 条 提示 信息 的 方式 自动 显示 出 来 。 
在 表单 中 合理 使 用 title 属性 ， 可 以 为 用 户 在 填写 表单 时 提供 更 多 的 提示 与 帮助 信息 。 


Ee 口 x i x 
颗 HTML 之 为 怀 符 元 素 和 jn X 和 和 旦 HTML 之 为 标 码 元素 Sn X 下 二 
所 罗 localhost:63342/html 辕 躁 © Q Bing <Cvizk> » 三 二 入 localhost63342/html 辕 踊 © Q Bing<Cvik> 3 至 
HTML 之 为 标签 元 素 添加 title 属 性 HTML 之 为 标签 元 素 添加 title 属 性 
层 骂 样式 老 ( CSS ) 目前 最 新 版 本 为 CSS3 层 呈 样式 志 ( CSS ) 目前 最 新 版 本 为 CSS3 
链 过 到。 链 计 到 
EE 天 单 提交 ; 
用 户 名 :| | 用 户 名 : 
室友 :| J] 过 码 : [ RARE 


localhose63342/html.ces-jquery/chaprerO1/chO1 -htmleomp-ttle htm 


图 1.37 HTML 网 页 内 为 a 标签 添加 title 属性 图 1.38 HTML 网 页 内 为 form 表单 元 素 添加 title 属性 


] . 乌 。 添 加 网 页 注释 


本 节 我 们 介绍 HTML 网 页 中 添加 注释 的 使 用 方法 。HTML 网 页 中 被 注释 的 内 容 是 不 会 显示 
在 浏览 器 中 的 ， 这 样 可 以 有 效 避 免 页 面 中 想 隐 藏 的 内 容 也 被 显示 出 来 ， 这 就 是 注释 的 功能 所 在 。 

在 HTML 网 页 中 使 用 注释 的 优点 有 很 多 : 比如 为 代码 添加 注释 ， 既 可 以 方便 自己 后 期 修改 
维护 ， 也 可 以 方便 其 他 程序 员 阅读 理解 并 完善 你 写 的 代码 ;又 比如 将 暂时 不 需要 执行 的 代码 先 注 
释 起 来 ， 这 样 以 后 想 重 新 恢复 代码 时 就 很 简单 ， 当 然 最 关键 的 一 点 ， 一 段 优秀 的 代码 配 上 合理 必 
要 的 注释 才 算 完美 ， 这 也 是 一 个 优秀 程序 员 所 必 备 的 良好 习惯 之 一 。 

如 果 读 者 想 在 HTML 网 页 中 使 用 注释 ， 需 要 使 用 “<!-- -->” 符 号 ， 并 遵循 下 面 的 写法 : 


<!-- comment --> 


蒜 元 | 只 有 上 面 这 种 符号 对 HTML 网 页 代码 起 注释 作用 ， 而 像 “/” 和 “人 # *” 符 号 也 会 出 现在 
l HTML 网 页 中 ， 但 只 会 对 JavaScript 脚本 代码 和 CSS 样式 代码 起 作用 。 


下 面 我 们 看 一 段 使 用 注释 的 代码 ， 这 段 代码 〈 参 见 源 代 码 chapter01/ch01-htmlcomp- 
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comment.html 文件 ) 是 一 个 在 HTML 网 页 内 使 用 注释 的 方法 。 
【示例 1-32】HTML 网 页 中 添加 注释 


在 这 段 HTML 代码 中 ， 有 多 处 使 用 到 了 注释 ， 下 面 我 们 详细 介绍 : 


第 04 行 的 注释 说 明 下 面 代码 用 于 添加 头 部 内 容 ; 

第 06 行 的 注释 说 明 下 面 一 段 为 定义 CSS 样式 的 代码 ; 

第 17 行 、 第 20 行 、 第 23 行 和 第 26 行 后 面 的 CSS 注释 ,使 用 的 是 “/* */” 符 号 ; 

第 31 行 脚本 代码 后 面 的 JavaScript 注释 ， 使 用 的 是 “//TODO:” 符 号 ; 

第 42 行 、 第 44 行 、 第 46 行 和 第 48 行 的 注释 说 明 其 后 的 代码 添加 了 四 种 不 同 风格 的 CSS 
样式 字体 ; 

而 第 50~51 行 原本 想 完成 与 第 42 一 43 行 同样 的 功能 ， 但 第 50 行 注释 代码 中 注释 结尾 符号 
“->” 不 小 心 没 写 完 ， 结 果 将 第 1 一 54 行 全 部 注释 了 。 

下 面 我 们 运行 测试 这 个 页 面 ， 其 效果 如 图 1.39 所 示 。 从 图 中 看 到 ， 由 于 第 50 行 的 错误 ， 第 
51 行 的 内 容 没有 显示 出 来 :， 同时， 虽然 第 52 一 54 行 也 被 注释 掉 了 ， 但 并 没有 影响 HTML 网 页 
的 正常 输出 。 

Fe CU 


各 入 localhost53342/niml 十 咯 "| CQ ano<cmrk> 3 为 至 


HTML 之 为 标签 元 素 添 加 ttle 必 性 


class font pold 
class font bold 
class font italic 


class font italic 


1.39 ”HTML 网 页 中 添加 注释 效果 
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.1 O 测试 浏览 器 对 HTML 5 属性 的 支持 


对 于 HTML 开发 设计 人 员 来 讲 ， 浏 览 器 的 兼容 性 是 一 个 复杂 又 不 可 回避 的 问题 。 随 着 技术 
的 进步 ， 目 前 市 面 上 的 主流 浏览 器 对 HTML 的 支持 已 经 很 完善 了 ， 不 像 早期 浏览 器 的 兼容 性 那 
样 ， 让 开发 设计 人 员 伤 透 了 脑筋 。 

本 节 我 们 介绍 浏览 器 对 HTML 属性 的 支持 问题 ， 包 括 对 最 新 的 HTML 5 属性 的 支持 。 
HTML 5 是 一 个 全 新 的 标准 ， 增 加 了 很 多 新 的 特性 ， 对 多 媒体 的 支持 也 更 全 面 。 因 此 ， 浏 览 器 对 
HTML 5 属性 的 支持 也 是 判断 其 兼容 性 的 重要 指标 。 

下 面 我 们 来 看 一 段 判断 浏览 器 是 否 支持 HTML 某 个 属性 的 代码 ， 这 段 代 码 〈 参 见 源 代码 
chapter01/ch01-htmlcomp-support-prop.html 文件 ) 是 一 个 判断 HTML 常用 属性 的 方法 。 


【示例 1-33】 判断 HTML 常用 属性 
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在 这 段 HTML 代码 中 ， 判 断 了 div 标签 是 否 支持 一 些 常用 的 HTML 属性 ， 下 面 我 们 详细 介绍 : 

第 15 一 19 行 定义 了 一 个 JavaScript 脚本 函数 isSupport(prop)， 第 17 行 通过 createElement() 函 
数 方法 创建 一 个 div 标签 ， 并 使 用 in 方法 将 属性 判断 结果 进行 返回 ; 

第 30 行 定义 了 一 个 包含 6 个 常用 的 HTML 属性 的 数组 “prop”; 

第 31 一 33 行 通过 for 循环 语句 依次 判断 数组 “prop” 中 的 属性 是 否 为 div 标签 所 支持 ， 具 体 
通过 isSupportProp0) 函 数 方法 来 判断 ; 

第 34 一 42 行 是 isSupportProp0 函 数 方法 的 实现 过 程 ， 在 该 函数 方法 内 部 通过 调用 第 15 一 19 
行 定义 的 isSupport(prop) 函 数 方法 来 实现 判断 。 

下 面 我 们 运行 测试 这 个 页 面 ， 其 效果 如 图 1.40 所 示 。 从 图 中 看 到 ， 层 div) 标签 是 支持 
“id” “style” 和 “title” 属 性 的 ， 而 “name”“type” 和 “value” 属 性 是 不 支持 的 。 


= 


者 可 | localhost63342/himl 国 品 7 CGC QBing<cvitk> 2 至 


HTML 之 判断 支持 属性 


1.40 判断 HTML 常用 属性 结果 
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下 面 我 们 看 一 段 判 断 浏览 器 是 否 支持 HTML 5 属性 的 代码 ， 这 段 代 码 (参见 源 代码 
chapter01/ch01-htmlcomp-support-HTML 5.html 文件 ) 是 一 个 判断 HTML 5 属性 的 方法 。 


【示例 1-34】 判 断 浏览 器 是 否 支持 HTML 5 属性 


在 这 段 HTML 代码 中 ， 判 断 浏览 器 是 否 支 持 HTML 5 属性 主要 使 用 了 Web Worker 属性 ; 第 
06 行 通过 typeof() 方 法 判定 Worker 属性 是 否 未 定义 〈"undefined")， 如 果 定 义 了 则 判定 浏览 器 支 
持 HTML 5 属性 。 

下 面 我 们 使 用 最 新 版 的 FireFox 浏览 器 (v.42.0 版 ) 运行 测试 这 个 页 面 ， 其 效果 如 图 1.41 所 
示 。 从 图 中 看 到 ， 新 版 FireFox 浏览 器 对 HTML 5 是 支持 的 。 


€ @ localhost63342/html 加 | x |,Q anoccnrk> 2 三 | 


141 判断 FireFox 浏览 器 是 否 支持 HTML 5 属性 
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第 1 章 网 页 的 架构 基础 


下 面 我 们 再 使 用 最 新 版 的 Microsoft Edge 浏览 器 (Windows 10 预览 版 自 带 ) 来 运行 测试 这 
个 页 面 ， 其 效果 如 图 1.42 所 示 。 从 图 中 看 到 ，Microsoft Edge 浏览 器 对 HTML 5 也 是 支持 的 。 看 
来 不 支持 HTML 5 的 浏览 器 只 有 早期 Windows XP 系统 下 的 IE6、IE7 和 IE8 浏览 器 了 。 


此 站 点 提示 … 
正在 使 用 的 浏览 做 支持 HTML5 硅 性 


1.42 ”判断 Microsoft Edge 浏览 器 是 否 支持 HTML 5 属性 


.1 案例 实战 : 一 个 完整 的 HTML 5 网 页 应 用 


在 前 面 几 节 中 ， 我 们 逐步 介绍 了 HTML 网 页 架构 中 方方面面 的 内 容 ， 让 读者 对 于 HTML 网 
页 有 了 一 个 基本 的 了 解 。 

本 节 我 们 向 读者 介绍 一 个 完整 的 HTML 网 页 应 用 ， 其 中 包含 了 HTML 页面、CSS 样式 和 
JavaScript 脚本 的 全 部 内 容 ， 算 是 对 前 面 内 容 的 一 个 小 结 。 另 外 ， 为 了 展现 出 一 个 美观 的 HTML 
页 面 ， 我 们 加 入 了 流行 的 Bootstrap 样式 框架 和 jQuery 脚本 语言 框架 。 读 者 可 以 先 不 去 深入 了 解 
这 两 个 框架 的 详细 内 容 ， 只 需要 知道 其 实现 了 什么 效果 就 可 以 了 。 

下 面 我 们 具体 介绍 这 个 HTML 网 页 应 用 ， 这 段 代码 (参见 源 代码 chapter0l/alyindex.html 文 
件 ) 是 该 HTML 网 页 应 用 的 主页 。 


【示例 1-35】 一 个 完整 的 HTML 网 页 应 用 
01 <!DOCTYPE html> 
02 <html lang="en"> 
03 <head> 
04 <!-- meta define --> 
05 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
06 <!-- css define --> 
07 <link rel="stylesheet" href="css/bootstrap.min.css"> 
08 <!-- js define --> 
09 <script src="js/jquery.min.js"></script> 
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在 这 段 HTML 代码 中 ， 总 体 上 应 用 DIV+CSS 分 层 结构 将 页 面 划分 为 四 个 模块 ， 下 面 我 们 
详细 介绍 : 
第 一 个 模块 是 页 面 的 头 部 ， 主 要 通过 第 15 一 35 行 定义 了 一 个 header 层 ; 其 中 ， 第 19 行 定 
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义 页 面 标题 ， 第 25 一 30 行 定义 了 一 个 水 平方 向 的 导航 菜单 ; 

第 二 个 和 第 三 个 模块 构成 页 面 的 主体 部 分 ， 其 中 ， 第 二 个 模块 主要 通过 第 40 一 63 行 定义 了 
一 个 main 层 ， 实 现 了 页 面 的 主体 内 容 部 分 ， 第 三 个 模块 主要 通过 64 一 81 行 定义 了 aside 层 ， 实 
现 了 一 个 垂直 方向 的 导航 菜单 ; 

第 四 个 模块 是 页 面 的 底部 ， 主 要 通过 85 行 定义 了 一 个 footer 层 ， 其 中 主要 包括 页 面 注册 信 
息 、 版 权 信息 和 作者 信息 等 内 容 ; 

另外 ， 第 07 行 引入 了 外 部 的 CSS 样式 表 (参见 源 代码 chapter0l/allcss 文件 夹 中 的 样式 表 文 
件 )， 也 就 是 前 面 提 到 的 Bootstrap 样式 框架 ;第 09 一 10 行 引入 了 外 部 的 JavaScript 脚本 库 (参见 
源 代码 chapter01/allijs 文件 夹 中 的 脚本 库 文件 )， 也 就 是 前 面 提 到 的 jQuery 脚本 语言 框架 。 

下 面 我 们 运行 测试 这 个 页 面 ， 其 效果 如 图 1.43 所 示 。 从 图 中 看 到 ， 整 个 HTML 页 面 层次 结 
构 非 常 清晰 ， 头 部 、 主 体 〈 内 容 主体 与 垂直 方向 导航 菜单 ) 和 底部 模块 依次 排列 在 页 面 中 ， 后 续 
开发 更 复杂 的 页 面 内 容 时 ， 可 以 继续 以 此 框架 为 基础 。 


En -ox 
$locunosw tm 本 © pny Ck 让 ! 直 如 会 二 9j- 有 ej- 蜗 i"” 电 二 | 本 
HIML& CSS &J8 主页 博客 联系 我 们 关于 
一 个 HTML + CSS + JavaScript 完整 主页 目录 
m WING » Nov 30 2015 » 目 es20 
Am20 
一 个 HTML + CSS + JavaScript 先 整 主页 目 B20 
个 HTML + CSS + JavaSenpt 完整 主页 
一 个 HTML + CSS + JavaSeript 完整 主页 分 类 
B mms 
她 希 浏 览 一 BB sm20%4 


图 1.43 一 个 完整 的 HTML 网 页 应 用 效果 


1.12 4 千 


本 章 主要 介绍 了 HTML 网 页 的 架构 基础 ， 包 括 HTML 网 页 页 面 的 构成 、HTML 主要 标签 使 
用 方法 、 以 及 HTML 与 CSS 样式 表 和 JavaScript 脚本 代码 结合 使 用 的 内 容 ， 并 在 最 后 介绍 了 一 
个 综合 的 HTML 页 面 应 用 ， 该 应 用 包含 了 HTML 网 页 架构 中 方方面面 的 内 容 ， 还 结合 使 用 了 最 
流行 的 前 端 框 架 ， 可 以 对 读者 进行 HTML 网 页 深入 开发 有 所 启迪 。 
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第 2 章 
< HTML 网 页 的 基本 标签 > 


本 章 我 们 介绍 HTML 网 页 的 基本 标签 。 一 般 来 说 ，HTML 网 页 中 的 基本 标签 包括 段落 、 文 
字 、 符 号 与 编号 、 注 释 、 特 殊 符 号 和 超 链 接 等 内 容 。 通 过 这 些 基 本 的 标签 ， 就 可 以 构建 出 一 个 功 
能 完整 的 HTML 网 页 ， 并 实现 与 用 户 进行 基本 交互 的 功能 。 

本 章 主要 包括 以 下 内 容 : 

@ ”段落 排版 
文字 效果 
项 目 符号 与 编号 
注释 与 特殊 符号 
超 链接 


HTML 网 页 段落 排版 


网 页 中 避免 不 了 段落 文字 ， 不 管 是 视频 网 站 还 是 门户 网 站 。 门 户 网 站 就 是 我 们 常 说 的 新 浪 、 
搜狐 ， 网 页 中 多 是 一 些 图 文 性 质 的 新 闻 ， 如 果 不 进行 排版 ， 估 计 我 们 就 要 看 花 眼 了 。 


2.1.1 设置 段落 样式 的 标记 


HTML 网 页 中 的 段落 是 通过 <p></p> 标 签 来 定义 的 。HTML 网 页 中 的 段落 ， 类 似 于 我 们 常 说 
的 文章 写作 中 的 自然 段 ， 是 HTML 网 页 中 一 个 非常 重要 的 元 素 。 

在 浏览 器 中 展示 段落 <p></p> 标 签 时 ， 会 自动 为 每 一 个 段落 的 前 后 添加 空 行 。 同 时 ， 建 
议 一 定 要 带 上 结束 标签 〈 即 使 不 小 心 忘 了 使 用 结束 标签 ， 目 前 的 浏览 器 也 会 将 HTML 网 页 正 
确 显示 出 来 )， 一 是 因为 良好 的 代码 习惯 ， 二 是 也 有 可 能 浏览 器 会 出 现 无 法 正确 解析 HTML 
页 面 问题 。 

下 面 我 们 看 一 段 设置 段落 样式 标记 的 代码 ， 这 段 代码 (参见 源 代码 chapter02/ch02-htmltag-p- 
style.html 文件 ) 是 一 个 设置 段落 样式 标记 的 方法 。 

【示例 2-1】 设置 段落 样式 的 标记 

01 <!DOCTYPE html> 

02 <html lang="zh-cn"> 


构建 移动 网 站 与 APP: HTML 5+CSS 3+jQuery Mobile 入 门 与 实战 


在 这 段 HTML 代码 中 ， 对 段落 p 标签 设置 了 样式 : 第 11 行 代码 使 用 p 标签 定义 了 一 个 段 
落 ， 其 内 容 介绍 了 当前 的 HTML 页 面 名 称 ;第 13 一 15 行 代码 同 第 11 行 代码 一 样 定 义 了 一 个 段 
落 ， 不 同 之 处 是 在 <p> 标 签 内 使 用 style 属性 定义 了 字体 样式 〈font-style: italic:font-size: larger)， 
这 样 两 个 段落 虽然 内 容 一 致 ， 但 显示 出 来 的 字体 风格 会 有 差异 。 

运行 测试 这 个 页 面 ， 效 果 如 图 2.1 所 示 。 从 图 中 看 到 ， 由 于 第 13 一 15 行 代 码 定义 了 段落 样 
式 ， 所 以 页 面 中 显示 出 来 的 字体 风格 产生 了 变化 。 


所 各 localhost63342/html-css- 四 器 1C » 三 


HTML 之 设置 段落 样式 的 标记 


当前 网 页 : ch02-htmltag-p-style.html 
BR : ch02-htmltag-p-style html 


图 2.1 设置 段落 样式 标记 的 效果 


2.1.2 ”设置 对 齐 与 缩 进 的 标记 


在 页 面 中 使 用 <p></p> 标 签 展示 段落 时 ， 对 齐 〈textralign) 与 缩 进 〈textintend) 功能 设置 是 
必 不 可 少 的 ， 就 像 小 学 生 写作 文 一 样 ， 老 师 会 强调 作文 的 格式 。 

下 面 我 们 看 一 段 设置 对 齐 与 缩 进 标记 的 代码 ， 这 段 代 码 〈 参 见 源 代 码 chapter02/ch02- 
htmltag-p-intend.html 文件 ) 是 一 个 设置 段落 对 齐 与 缩 进 标记 的 方法 。 
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【示例 2-2】 设置 对 齐 与 缩 进 的 标记 


在 这 段 HTML 代码 中 ， 对 三 个 段落 p 标签 设置 了 对 齐 与 缩 进 ， 下 面 我 们 详细 介绍 : 

第 11 一 14 行 代码 为 第 一 个 段落 ， 在 <p> 标 签 内 使 用 style 属性 定义 了 对 齐 与 缩 进 样式 text- 
align: justify;text-indent: 2em; )， 其 中 “justify ”表示 两 端 对 齐 ， 而 缩 进 的 尺寸 为 两 个 相对 字符 长 
度 (2em); 

第 15 一 18 行 代码 为 第 二 个 段落 ， 在 <p> 标 签 内 使 用 style 属性 定义 了 对 齐 与 缩 进 样式 〈text- 
align: left;text-indent: 0em; )， 其 中 “left ”表示 左 对 齐 ， 而 缩 进 的 尺寸 为 零 个 相对 字符 长 度 

(COem ); 

第 19 一 22 行 代码 为 第 三 个 段落 ， 在 <p> 标 签 内 使 用 style 属性 定义 了 对 齐 与 缩 进 样式 (text- 

align: right:text-indent: 4em; )， 其 中 “right” 表 示 右 对 齐 ， 而 缩 进 的 尺寸 为 零 个 相对 字符 长 度 
(4em )。 

运行 测试 这 个 页 面 ， 效 果 如 图 2.2 所 示 。 从 图 中 看 到 ， 两 端 对 齐 的 风格 是 比较 美观 的 ， 而 左 
右 对 齐 的 风格 可 以 应 用 到 特殊 的 场景 之 中 ; 同时 ， 缩 进 的 长 度 不 宜 过 大 或 过 小 ， 本 段 代码 中 设置 
的 两 个 相对 字符 长 度 还 比较 合适 。 
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震 HTML 之 设 和 自若- X 十 
所 久 localhost63342/html 四 器 CC » 三 


HTML 之 设置 段落 对 齐 与 缩 进 
对 齐 和 缩 进 是 排版 最 常用 的 方法 ， 也 是 要 


段落 的 
求学 生 重点 掌握 的 内 容 。 这 部 分 内 容 有 “段落 对 
齐 ”、“ 段 落 缩 进 ” 等 几 个 知识 点 。 
“段落 对 齐 ” 中 对 齐 方式 有 “ 左 对 齐 ”、“ 居 中 ”、 
“ 右 对 齐 ”、 “两 端 对 齐 ”、“ 分 散 对 齐 ” 几 种 。 
“段落 缩 进 ” 主 要 包括 “ 左 缩 进 ”、“ 右 缩 
进 ” 等 几 种 ， 使 用 “段落 缩 进 ”方法 可 以 让 自然 段落 


图 22 设置 对 齐 与 缩 进 标记 的 效果 


2.1.3 ”添加 分 隔 线 


在 页 面 中 使 用 hr 分 割 线 标签 也 是 很 常见 的 ， 辟 如 在 网 页 底部 通常 用 一 条 分 割 线 将 公司 信 
息 、 作 者 信息 、 版 权 信息 和 注册 备案 信息 分 割 开 来 ， 以 示 和 网 页 主体 部 分 的 区 分 。 

下 面 我 们 看 一 段 设置 分 割 线 的 代码 ， 这 段 代码 (参见 源 代码 chapter02/ch02-htmltag-hrhtml 
文件 ) 是 一 个 设置 页 面 底部 分 割 线 的 方法 。 


【示例 2-3】 添加 分 隔 线 
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在 这 段 HTML 代码 中 ， 在 页 面 底部 (第 16 一 20 行 代码 ) 上 方 添加 了 三 条 不 同 风格 的 分 割 
线 : 第 13 行 代码 为 第 一 条 分 割 线 ， 是 没有 添加 任何 风格 的 原始 样式 分 割 线 ，14 行 代码 为 第 二 条 
分 割 线 ， 设 置 了 分 割 线 高 度 (2px) 和 虚线 (dashed ) 边框 样式 ; 第 15 行 代码 为 第 三 条 分 割 线 ， 
设置 了 分 割 线 高 度 (4px) 和 双 虚 线 double) 边框 样式 。 

运行 测试 这 个 页 面 ， 效 果 如 图 2.3 所 示 。 


蜂 HTML 之 设置 分 基线 X 
二 国 localhost63342/html 四 器 C » 三 


HTML 之 设置 分 割 线 


re 


© 2015 HTML CSS JavaScript KING 


图 23 添加 分 割 线 的 效果 


2.1.4 设置 段落 标题 


前 面 几 个 小 节 介绍 了 段落 的 相关 内 容 ， 这 个 小 节 我 们 介绍 为 段落 添加 标题 的 方法 ， 段 落 加 上 
标题 才 会 组 成 完整 的 文章 。 

下 面 这 段 代 码 〈 参 见 源 代码 chapter02/ch02-htmltag-p-hx.html 文件 ) 是 一 个 设置 段落 标题 的 
方法 。 

【示例 2-4】 设置 段落 标题 
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在 这 段 HTML 代码 中 ， 添 加 了 文章 大 标题 和 段落 小 标题 : 第 09 行 代码 为 文章 添加 了 居中 对 
齐 的 大 标题 ;第 10 行 与 第 15 行 代码 为 两 个 段落 添加 了 小 标题 。 
运行 测试 这 个 页 面 ， 效 果 如 图 2.4 所 示 。 
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看 外 localhost63342/html 四 器 C » 三 


文章 大 标题 


段落 标题 

段落 的 对 齐 和 缩 进 是 排版 最 常用 的 方法 ， 也 是 要 
求学 生 重点 掌握 的 内 容 。 这 部 分 内 容 有 “段落 对 
齐 ”、“ 段 落 缩 进 ” 等 几 个 知识 点 。 
段落 标题 


段落 的 对 齐 和 缩 进 是 排版 最 常用 的 方法 ， 也 是 要 
求学 生 重点 掌握 的 内 容 。 这 部 分 内 容 有 “段落 对 
齐 、" ”等 几 个 知识 点 。 


图 2.4 添加 段落 标题 的 效果 


2 .2 文字 效果 


网 页 中 的 文字 效果 一 般 包 括 文字 的 字体 、 字 号 、 上 标 、 下 标 等 ， 本 节 主 要 通过 小 例子 来 演示 
网 页 中 不 同 的 文字 展现 形式 。 


2.2.1 设置 字形 样式 的 标记 


在 HTML 网 页 中 可 以 展现 出 风格 多 样 的 字形 样式 ， 一 般 通过 设置 CSS 的 font-family 属性 就 
可 以 实现 。 

下 面 我 们 看 一 段 设置 字形 样式 的 代码 ， 这 段 代码 (参见 源 代码 chapter02/ch02-htmltag-font- 
family.html 文件 ) 是 一 个 设置 不 同 风格 字形 的 方法 。 
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【示例 2-5】 设置 字形 样式 的 标记 


在 这 段 HTML 代码 中 ， 对 三 个 段落 设置 了 三 种 字形 样式 : 第 17 行 代码 为 第 17 一 20 行 代码 
的 段落 定义 了 “cursive” 字 形 样式 ， 该 字形 与 “Serif” 和 “Sans-serif” 一 样 为 通用 样式 ; 第 21 
行 代码 为 第 21 一 24 行 代码 的 段落 定义 了 “黑体 ”字形 样式 ， 该 字形 为 特定 样式 ， 第 25 行 代码 为 
第 25 一 28 行 代码 的 段落 定义 了 “ 幼 圆 ”字形 样式 ， 该 字形 也 为 特定 样式 。 

运行 测试 这 个 页 面 ， 效 果 如 图 2.5 所 示 。 
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i ti 也 是 要 
求学 生 重点 掌 摄 的 内 容 。 pil 有 “段落 对 
齐 ”、“ 段 落 缩 进 ” 各 入 


段落 的 对 齐 和 缩 进 是 排版 最 常用 的 方法 ， 也 是 要 
求学 生 重点 掌握 的 内 容 。 这 部 分 内 容 有 “段落 对 
齐 ”、“ 段 落 缩 进 ”等 几 个 知识 点 。 


段落 的 对 齐 和 缩 进 是 排版 最 常用 的 方法 ， 也 是 要 
求学 生 重点 掌握 的 内 容 。 这 部 分 内 容 有 “段落 对 
齐 ”、“ 段 落 缩 进 ” 等 几 个 知识 点 。 


图 2.5 设置 字形 样式 标记 的 效果 


2.2.2 设置 上 标 、 下 标 


在 HTML 网 页 中 有 时 还 需要 定义 上 标 字 体 和 下 标 字体 ， 辟 如 在 文献 引用 时 上 标 字 体 肯 定 要 
用 到 ， 而 定义 数理 化 等 元 素 符号 时 下 标 字体 也 是 必 不 可 少 的 。HTML 规范 设计 了 sup 标签 表示 上 
标 ，sub 标签 表示 下 标 。 

下 面 我 们 看 一 段 使 用 上 下 标的 代码 ， 这 段 代码 (参见 源 代码 chapter02/ch02-htmltag-sup- 
sub.html 文件 ) 是 一 个 设置 字体 上 下 标的 方法 。 


【示例 2-6】 设置 上 、 下 标的 标记 
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在 这 段 HTML 代码 中 ， 分 别 使 用 了 上、 下 标 标记 : 第 12 行 代码 使 用 sup 标签 定义 了 上 标 标 
记 【1]1， 用 于 表示 引用 文献 的 序号 ; 第 15 行 代码 使 用 sub 标签 定义 了 下 标 标记 2， 用 于 表示 水 
分 子 化 学 符号 中 氧 元 素 (H) 的 分 子 量 。 

运行 测试 这 个 页 面 ， 效 果 如 图 2.6 所 示 。 


二 种 localhost63342/html 国 器 7 CC 


HTML 之 字体 上 下 标 
引用 文献 [1] 是 关于 HTML 上 标 标签 元 素 的 。 
HzO 是 代表 水 分 子 元 素 符号 的 。 


图 2.6 设置 上 、 下 标的 标记 的 效果 


2 .了 项 目 符号 与 编号 


在 网 页 中 我 们 经 常会 看 到 一 些 并 列 内 容 或 有 层次 的 文字 ， 通 常 为 了 直观 地 显示 这 些 内 容 ， 我 
们 会 用 到 项 目 符号 和 编号 ， 这 跟 Word 中 的 项 目 符号 和 编号 类 似 。 


2.3.1 符号 列表 

符号 列表 在 文档 中 是 一 种 比较 常见 的 表现 形式 ， 符 号 可 以 定义 为 多 种 样式 ， 壁 如 : 圆 点 符号 、 
星 型 符号 、 箭 头 符号 等 。 在 HTML 网 页 中 ， 我 们 可 以 通过 ul-i 标签 来 实现 无 序 的 符号 列表 。 

下 面 我 们 看 一 段 符号 列表 的 代码 ， 这 段 代 码 (参见 源 代码 chapter02/ch02-htmltag-ul-li.html 
文件 ) 是 一 个 设置 不 同 风格 符号 列表 的 方法 。 


【示例 2-7】 符号 列表 
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在 这 段 HTML 代码 中 ， 定 义 了 三 种 样式 的 符号 列表 : 第 11 一 15 行 代码 使 用 ul 标签 定义 了 
type="disc" 样 式 的 符号 列表 ，"disc" 样 式 表示 实心 圆 点 ， 同 时 该 样式 也 为 ul 标签 的 缺 省 样式 ， 第 
16 一 20 行 代码 使 用 ul 标签 定义 了 type="circle" 样 式 的 符号 列表 ，"circle" 样 式 表示 空心 圆圈 ;第 
21 一 25 行 代码 使 用 标签 定义 了 type="square" 样 式 的 符号 列表 ，"square" 样 式 表示 实心 方块 。 

运行 测试 这 个 页 面 ， 效 果 如 图 2.7 所 示 。 


em | 
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HTML 之 符号 列表 


图 2.7 符号 列表 


另外 ，HTML 还 支持 一 些 特殊 符号 的 列表 ， 感 兴趣 的 读者 可 以 参阅 相关 文档 做 进一步 的 学 
习 研 究 。 
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2.3.2 ”编号 列表 


编号 列表 在 文档 中 也 是 一 种 比较 常见 的 表现 形式 ， 同 时 编号 也 可 以 定义 为 多 种 样式 ， 辟 如 : 
阿拉 伯 数 字 、 罗 马 数字 、 字 母 等 。 在 HTML 网 页 中 ， 我 们 可 以 通过 olli 标签 来 实现 有 序 的 编号 
列表 。 

下 面 我 们 看 一 段 编 号 列表 的 代码 ， 这 段 代码 (参见 源 代码 chapter02/ch02-htmltag-ol-li.html 
文件 ) 是 一 个 设置 不 同 风格 编号 列表 的 方法 。 


【示例 2-8】 编号 列表 
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在 这 段 HTML 代码 中 ， 定 义 了 五 种 样式 的 编号 列表 ， 下 面 我 们 详细 介绍 : 

第 12 一 16 行 代码 使 用 ol 标签 定义 了 type="1" 样 式 的 编号 列表 ，"1" 样 式 表 示 阿 拉 伯 数 字 ， 同 
时 该 样式 也 是 ol 标签 的 缺 省 样式 ; 

第 18 一 25 行 代码 使 用 ol 标签 定义 了 type=" 了 "样式 的 编号 列表 ，"I" 样 式 表 示 大 写 罗 马 数字 ; 
同时 ， 第 20 一 23 行 代码 定义 了 type=" 了 "样式 的 二 级 编号 列表 ，" 六 样式 表示 小 写 罗马 数字 ; 

第 27 一 34 行 代码 使 用 ol 标签 定义 了 type="A" 样 式 的 编号 列表 ，"A" 样 式 表 示 大 写字 母 ， 同 
时 ， 第 29 一 32 行 代码 定义 了 type="a" 样 式 的 二 级 编号 列表 ，"a" 样 式 表示 小 写字 母 。 

运行 测试 这 个 页 面 ， 效 果 如 图 2.8 所 示 。 


Fr 
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HTML 之 编号 列表 


2.8 编号 列表 


另外 ，HTML 还 支持 一 些 复杂 的 编号 符号 的 列表 ， 感 兴趣 的 读者 可 以 参阅 相关 文档 做 进 一 
步 的 学 习 研 究 。 


2.3.3” 自 定义 列表 


自 定义 列表 不 仅仅 是 一 列 项 目 ， 同 时 也 是 项 目 及 其 注释 的 组 合 。 自 定义 列表 以 dl 标签 开 
始 ， 每 个 自 定义 列表 项 以 dt 标签 开始 ， 每 个 自 定义 列表 项 的 定义 以 dd 标签 开始 。 

下 面 我 们 看 一 段 自 定义 列表 的 代码 ， 这 段 代码 (参见 源 代码 chapter02/ch02-htmltag-dl-dt- 
dd.html 文件 ) 是 一 个 设置 自 定义 列表 的 方法 。 
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【示例 2-9】 ” 自 定 义 列表 


在 这 段 HTML 代码 中 ， 定 义 了 一 种 自 定义 列表 : 第 12 一 19 行 代 码 使 用 dl 标签 定义 了 自 定 
义 列表 ; 第 13 行 、 第 15 行 和 第 17 行 代码 使 用 dt 标签 定义 了 自 定义 列表 项 ; 第 14 行 、 第 16 行 
和 第 18 行 代码 使 用 dd 标签 定义 了 上 面 三 个 自 定义 列表 项 的 注释 。 

运行 测试 这 个 页 面 ， 效 果 如 图 2.9 所 示 。 
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HTML 之 自 定义 列表 


HTML 

HyperText Mark-up Language 
CSS3 

Cascading Style Sheets 3 
JavaScript 

一 种 直译 式 脚本 语言 


图 2.9 自 定义 列表 
另外 ， 自 定义 列表 的 列表 项 内 部 可 以 使 用 段落 、 换 行 符 、 图 片 、 链 接 以 及 其 他 列表 等 。 
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了. 人， 使 用 特殊 符号 


本 节 我 们 介绍 HTML 规范 标准 的 特殊 符号 ， 这 些 特 殊 符 号 可 能 不 是 很 常用 ， 但 在 一 些 特殊 
情况 下 不 得 不 使 用 。 了 解 这 些 特殊 符号 的 使 用 方法 ， 可 以 帮助 我 们 解决 很 多 复杂 的 问题 。 

下 面 这 段 代码 (参见 源 代码 chapter02/ch02-htmltag-speccharhtml 文件 ) 是 一 个 如 何在 HTML 
文档 内 使 用 特殊 符号 的 方法 。 


【示例 2-10】 HTML 网 页 内 使 用 特殊 字符 
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在 这 段 HTML 代码 中 ， 我 们 分 别 将 特殊 字符 、 其 命名 实体 编码 和 十 进 制 编码 罗列 在 表格 之 
中 。HTML 定义 的 特殊 字符 很 多 ， 由 于 篇 幅 限 制 不 可 能 一 一 罗列 出 来 ， 上 面 的 代码 仅仅 介绍 了 
一 小 部 分 ， 读 者 可 以 参阅 源 代码 ， 里 面包 含 了 全 部 HTML 字符 。 

运行 测试 这 个 页 面 ， 打 开 后 的 效果 如 图 2.10 所 示 。 从 图 中 看 到 ， 许 多 不 常用 的 特殊 字符 ， 
HTML 规范 中 均 有 定义 ， 使 用 时 可 以 直接 编写 十 进 制 编码 ， 也 可 以 编写 命名 实体 编码 。 
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图 2.10 HTML 网 页 内 使 用 特殊 字符 
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人 .5 创建 超 链接 


当世 界 上 的 各 种 网 络 内 容 连接 在 一 起 时 ， 我 们 要 找 某 些 资料 就 需要 用 到 搜索 引擎 ， 而 搜索 引 
擎 给 出 的 结果 都 是 一 些 链接 ， 点 击 链 接 就 会 导航 到 具体 的 网 站 。 这 样 的 链接 ， 我 们 在 网 页 中 一 般 
称 为 超 链接 ， 有 时 也 叫 超 链 或 超级 链接 。 


2.5.1 什么 是 超 链 接 


在 HTML 网 页 中 使 用 超级 链接 ， 可 以 与 网 络 上 的 另 一 个 资源 〈 包 括 页 面 、 图 片 、 视 频 等 ) 
建立 连接 关系 。 理 论 上 ，HTML 网 页 中 的 绝 大 部 分 元 素 均 可 以 定义 超 链接 ， 壁 如 文字 、 图 片 、 
视频 、 表 格 和 控件 等 。 用 户 可 以 通过 点 击 这 些 超 链接 来 跳 转 到 新 的 页 面 当 中 去 ， 也 可 以 跳 转 到 当 
前 页 面 中 的 某 个 部 分 。 

HTML 页 面 中 ， 可 以 通过 使 用 a 标签 定义 和 创建 超 链接 ， 使 用 a 标签 的 方式 一 般 分 为 两 种 : 


@ ”通过 使 用 href 属性 创建 指向 另 一 个 页 面 的 链接 地 址 ; 
@ ”通过 使 用 name 属性 创建 本 页 面 内 的 书签 。 
定 于 超 链接 的 HTML 代码 语法 如 下 : 


refrurl>Tink textca 
其 中 ，href 属性 规定 链接 的 目标 地 址 ， 开 始 标签 和 结束 标签 之 间 的 文字 被 作为 超 链接 文本 来 

显示 。 

下 面 我 们 就 分 别 通过 示例 来 介绍 这 两 种 链接 方式 。 


2.5.2 ”站 外 网 页 链接 


所 谓 站 外 网 页 的 超 链接 ， 就 是 指 通过 使 用 href 属性 创建 指向 另 一 个 页 面 的 链接 地 址 。 
下 面 这 段 代码 (参见 源 代码 chapter02/ch02-htmltag-a-hrefhtml 文件 ) 是 一 个 创建 站 外 网 页 的 
超 链接 的 方法 。 


【示例 2-11】 站 外 网 页 链接 
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在 这 段 HTML 代码 中 , 第 11 行 代码 通过 a 标签 定义 了 一 个 站 外 网 页 链接 
(href="http:/www.gov.cn/")。 运 行 测试 这 个 页 面 ， 效 果 如 图 2.11 所 示 。 

我 们 尝试 点 击 上 图 页 面 中 的 链接 地 址 (“站 外 网 页 链接 : 政府 网 站 ”)， 由 于 定义 了 target 
属性 值 为 “_self”(target="_self*)， 因 此 站 外 网 页 将 在 当前 浏览 器 窗口 中 打开 ， 其 效果 如 图 
2.12 所 示 。 
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图 2.11 站 外 网 页 链接 (一) 图 2.12 站 外 网 页 链接 (二) 


2.5.3 ”站 内 网 页 链接 


所 谓 站 内 网 页 的 超 链接 ， 就 是 指 通过 使 用 name 属性 创建 本 页 面 内 的 书签 。 
下 面 这 段 代码 (参见 源 代码 chapter02/ch02-htmltag-a-name.html 文件 ) 是 一 个 创建 站 内 网 页 
的 超 链接 的 方法 。 


【示例 2-12】 站 内 网 页 链接 
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构建 移动 网 站 与 APP: HTML 5+CSS 3+jQuery Mobile 入 门 与 实战 


在 这 段 HTML 代码 中 ， 定 义 了 三 个 站 内 网 页 链接 ， 下 面 我 们 详细 介绍 : 

第 11 行 代码 通过 a 标签 定义 了 一 个 站 内 网 页 链接 (hre 全 "#anchor01")， 其 指向 的 是 第 15 行 
代码 定义 的 书签 "nanchor01"; 

同样 ， 第 12 行 与 第 13 行 代码 通过 a 标签 定义 了 另外 两 个 站 内 网 页 链接 〈hre 伟 "#anchor02" 
与 href="#anchor03")， 分 别 指向 的 是 第 18 行 和 第 21 行 代码 定义 的 书签 "anchor02" 与 "anchor03"。 

运行 测试 这 个 页 面 ， 效 果 如 图 2.13 所 示 。 我 们 尝试 点 击 上 图 页 面 中 的 链接 地 址 (“CSS”)， 
其 效果 如 图 2.14 所 示 。 从 图 2.13 和 2.14 的 效果 来 看 ， 当 点 击 第 12 行 代码 定义 的 站 内 链接 地 址 
后 ， 页 面 直接 跳 转 到 第 18 行 代码 定义 的 书签 的 位 置 。 同 样 ， 当 我 们 点 击 两 个 站 内 链接 地 址 时 ， 
页 面 也 会 自动 跳 转 到 相应 的 书签 位 置 。 


KE localhost63342/html 四 跟 Y C » 三 (te localhost63342/html 轩 器 Y CC » 


css 


HTML 之 站 内 网 页 链接 
CSS5(Cascading Style Sheets 3) 是 目前 最 流行 样式 
设计 语言 。 


S 。 


图 2.13 站 内 网 页 链接 (一 ) ” 图 2.14 ”站 内 网 页 链接 (二) 
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第 2 章 HTML 网 页 的 基本 标签 


2.6 4 千 


本 章 主要 介绍 了 HTML 网 页 的 基本 标签 ， 包 括 段 落 、 文 字 、 项 目 符号 与 编号 、 特 殊 符 号 以 
及 超 链接 的 内 容 。 本 章 的 内 容 比 较 基础 ， 但 也 非常 重要 ， 是 掌握 HTML 网 页 设计 起 步 的 必要 阶 
段 ， 希 望 能 给 广大 读者 带 来 帮助 和 启迪 。 
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第 3 章 
<HTML 5 表单 > 


本 章 我 们 介绍 最 新 的 HTML 5 表单 。 在 HTML 5 表单 中 ， 为 不 同 的 标签 增加 了 很 多 实用 的 
属性 ， 使 得 HTML 网 页 设计 开发 更 加 快捷 高 效 。 同 时 ，HTML 5 表单 与 JavaScript 脚本 语言 结合 
得 更 加 紧密 ， 以 前 很 复杂 的 交互 功能 在 HTML 5 表单 中 实现 起 来 变 得 很 简捷 了 。 

本 章 主要 包括 以 下 内 容 : 

@ E-mail 和 URL 类 型 的 输入 元 素 
@ ”数值 输入 

@ 日 期 选择 器 

@ 用 datalist 来 实现 自动 提示 


各 浏览 器 内 核 一 览 


众所周知 ， 浏 览 器 最 重要 的 核心 部 分 就 是 浏览 器 内 核 。 其 实 ， 浏 览 器 内 核 是 一 个 通俗 的 称 
谓 ， 比 较 专业 的 称谓 是 泻 染 引擎 〈 英 译 为 Rendering Engine)。 泻 染 引擎 的 功能 主要 是 完成 对 网 页 
语法 的 解释 (包括 HTML 语法 、CSS 样式 表 语 法 和 JavaScript 脚本 语言 语法 等 )， 并 在 浏览 器 中 
将 页 面 内 容 进 行 泻 染 显示 。 因 此 ， 浏 览 器 内 核 也 即 泻 染 引擎 是 浏览 器 最 为 核心 的 部 分 。 
但 是 ， 现 实 中 的 情况 却 很 复杂 ， 主 流 的 浏览 器 均 由 各 大 IT 公司 设计 开发 ， 不 同 的 浏览 器 内 
核 的 实现 也 有 所 不 同 ， 对 网 页 语法 的 解释 也 就 有 所 不 同 。 这 样 就 出 现 问题 了 ， 同 一 个 HTML 网 
页 在 不 同 的 浏览 器 里 的 泻 染 显示 效果 也 可 能 不 同 ， 同 一 款 浏览 器 对 HTML 网 页 与 HTML 5 网 页 
的 支持 度 也 可 能 不 同 。 因 此 网 页 开发 者 必须 要 测试 浏览 器 的 兼容 性 ， 也 就 是 在 不 同 内 核 的 浏览 器 
中 测试 同一 个 网 页 的 显示 效果 。 
下 面 我 们 简单 介绍 各 款 浏览 器 的 内 核 ， 包 括 其 起 源 、 演 变 历史 及 显著 特性 : 
@ Trident 内 核 : 微软 公司 开发 的 一 款 网 页 泻 染 引擎 ， 其 代表 产品 就 是 著名 的 Internet 
Explorer 浏览 器 ， 因 此 又 称 为 IE 内 核 。 另 外 ，Netscape 8、 做 游 、 世 界 之 窗 浏览 器 、 
Tecend TT 等 浏览 器 使 用 的 也 是 该 内 核 。 

@ Edge 内核: 微软 公司 最 新 推出 的 网 页 泻 染 引擎 ， 其 伴随 着 Windows 10 操作 系统 内 置 
的 Microsoft Edge 浏览 器 出 现 。 

@ WebKit 内 核 : 主要 代表 作品 有 Safari 浏览 器 和 Google Chrome 浏览 器 。 其 优点 是 源码 
结构 清晰 、 泻 染 速 度 极 快 ; 缺点 是 对 网 页 代码 的 兼容 性 不 高 ， 一 些 编写 不 标准 的 网 页 


代码 可 能 无 法 正常 显示 。 


@ ”Gecko 内 核 : 主要 代表 作品 为 著名 的 Mozilla Firefox 浏览 器 。Gecko 内 核 是 一 套 开放 源 
代码 的 、C++ 编 写 的 网 页 泻 染 引擎 。 

@ Presto 内 核 : 主要 代表 作品 就 是 Opera 浏览 器 。Presto 内 核 是 由 Opera Software 开发 的 
浏览 器 泻 染 引擎 ， 仅 支持 Opera 7.0 及 以 上 版 本 使 用 。 该 内 核 加 入 了 动态 功能 ， 页 面 可 
以 随 着 DOM 及 JavaScript 脚本 语法 的 事件 而 重新 进行 泻 染 显示 。 


另外 ， 还 有 一 些 知名 度 及 应 用 度 均 不 高 的 浏览 器 引擎 ， 壁 如 Tasman、KHTML、WebCore 
等 ， 感 兴趣 的 读者 可 以 了 解 一 下 。 


3 .2 E-mail 类 型 的 input 标签 


HTML 5 表单 为 input 标签 设计 了 几 个 全 新 的 type 类 型 ， 本 小 节 介绍 E-mail 类 型 。 设 置 成 E- 
mail 类 型 的 input 标签 可 以 在 表单 提交 时 ， 自 动 验证 其 中 内 容 是 否 为 合法 的 E-mail 类 型 地 址 ， 这 
样 就 降低 了 传统 JS 脚本 语言 验证 时 的 复杂 度 。 

下 面 我 们 看 一 段 在 HTML 5 表单 中 使 用 E-mail 类 型 的 代码 ， 这 段 代码 (参见 源 代码 
chapter03/ch02-HTML 5form-input-email.html 文件 ) 就 是 一 个 使 用 E-mail 类 型 input 标签 的 方法 。 


【示例 3-1】 ”E-mail 类 型 input 标签 的 使 用 
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构建 移动 网 站 与 APP: HTML 5+CSS 3+jQuery Mobile 入 门 与 实战 


在 这 段 HTML 代码 中 ， 定 义 了 一 个 form 表单 及 一 些 标签 ， 下 面 我 们 详细 介绍 : 

第 21 一 29 行 代码 通过 form 标签 定义 了 一 个 HTML 5 表单 ， 其 中 action 属性 定义 为 提交 到 当 
前 页 面 ，method 属性 定义 为 “get” 方 式 ， 并 定义 了 autocomplete 自动 完成 属性 ; 

第 22 一 23 行 代码 定义 了 一 个 type="text" 类 型 的 input 标签 ， 用 于 输入 用 户 名 称 ; 

第 24 一 25 行 代码 定义 了 一 个 type="password" 类 型 的 input 标签， 用 于 输入 登录 密码 ; 

第 26 一 27 行 代码 定义 了 一 个 type="email" 类 型 的 input 标签 ， 用 于 输入 电子 邮箱 地 址 ; 其 
中 ，type="email" 类 型 的 input 标签 就 是 HTML 5 表单 新 增加 的 特性 ， 提 交 时 可 以 自动 完成 对 电子 
邮件 地 址 类 型 的 验证 ;第 27 行 代 码 定义 E-mail 类 型 input 标签 时 ， 还 增加 了 autocomplete="off' 
属性 的 定义 ， 关 闭 了 input 标签 的 自动 完成 功能 ; 

第 28 行 代码 定义 了 一 个 type="submit" 类 型 的 input 标签 ， 用 于 提交 HTML 5 表单 。 

运行 测试 这 个 页 面 ， 效 果 如 图 3.1 所 示 。 从 图 中 可 以 看 到 ， 当 用 户 在 E-mail 类 型 的 
input 标签 中 输入 不 合法 的 电子 邮件 地 址 时 ， 该 input 标签 的 边框 会 自动 加 粗 变 成 红色 ， 提 示 
用 户 输入 有 误 。 

下 面 我 们 单 击 “提交 查询 ”按钮 运行 测试 这 个 页 面 ， 效 果 如 图 3.2 所 示 。 从 图 中 可 以 看 到 ， 
如 果 用 户 不 理会 提示 错误 ， 强 行 单 击 “ 提 交 查 询 ” 按 钮 ， 页 面 会 弹出 一 个 tooltip 提示 窗口 ， 告 
诉 用 户 “ 请 输入 电子 邮件 地 址 ”这 就 是 HTML 5 表单 的 新 特性 ， 内 部 实现 了 以 前 使 用 脚本 语言 
才能 完成 的 验证 功能 ， 真 的 很 强大 。 


所 多 localhost63342/html-css- 轩 器 vcC » 三 € 和 Blocalhost63342/html-css- 国 器 ”iC 2 三 
HTML5 表 单 之 E-mail 类 型 input 标 签 元 素 HTML5 表 单 之 E-mail 类 型 input 标 签 元 素 
用 户 名 : 用 户 名 
ng ng 
密码 : 可 码 : 
E-mail: E-mail: 

请 给 入 电子 邮件 地 址 。 

图 3.1 E-mail 类 型 input 标签 的 使 用 (一) 图 3.2 E-mail 类 型 input 标 签 的 使 用 (二 ) 
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用 第 3 章 HTML 5 表单 


在 表单 提交 成 功 后 ， 按 F5 键 刷 新 这 个 页 面 ， 效 果 如 图 3.3 所 示 。 从 图 中 可 以 看 到 ， 重 新 刷 
新 页 面 后 ，text 类 型 的 mput 标签 的 内 容 保留 下 来 了 ， 而 password 类 型 和 E-mail 类 型 的 input 标 
签 的 内 容 被 清空 了 ， 这 就 是 前 面 提 到 的 HTML 5 表单 的 自动 完成 新 特性 。 


€ @ iocalhost63342/html-css- 四 跟 v C | > 


HTML5 表 单 之 E-mail 类 型 input 标 签 元 素 


图 33 ”E-mail 类 型 input 标 签 的 使 用 (三 ) 


了 ,也 URL 类 型 的 input 标 签 


本 节 我 们 介绍 HTML 5 表单 为 input 标签 设计 的 另 一 个 全 新 的 type 类 型 ， 也 就 是 URL 类 
型 。 设 置 成 URL 类 型 的 input 标签 可 以 在 表单 提交 时 ， 自 动 验证 其 中 内 容 是 否 为 合法 的 URL 类 


型 地 址 。 


下 面 我 们 看 一 段 在 HTML 5 表单 中 使 用 URL 类 型 的 代码 ， 这 段 代 码 〈 参 见 源 代码 
chapter03/ch02-HTML 5form-input-url.html 文件 ) 就 是 一 个 使 用 URL 类 型 input 标签 的 方法 。 


【示例 3-2】 ”URL 类 型 input 标签 的 使 用 
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构建 移动 网 站 与 APP: HTML 5+CSS 3+jQuery Mobile 入 门 与 实战 


在 这 段 HTML 代码 中 ， 定 义 了 一 个 form 表单 及 一 个 input 标签 ， 下 面 我 们 详细 介绍 : 

第 21 一 25 行 代码 通过 form 标签 定义 了 一 个 HTML 5 表单 ， 其 中 action 属性 定义 为 提交 到 当 
前 页 面 ，method 属性 定义 为 “get” 方 式 ; 

第 22 一 23 行 代码 定义 了 一 个 type="url" 类 型 的 input 标签 ， 用 于 输入 URL 类 型 地 址 ， 其 中 ， 
type="url" 类 型 的 input 标签 就 是 HTML 5 表单 新 增加 的 特性 ， 提 交 时 可 以 自动 完成 对 URL 地 址 
的 验证 ， 第 23 行 代码 定义 URL 类 型 input 标签 时 ， 还 增加 了 autocomplete="off' 属 性 的 定义 ， 关 
闭 了 input 标签 的 自动 完成 功能 ; 

第 24 行 代码 定义 了 一 个 type="submit" 类 型 的 input 标签 ， 用 于 提交 HTML 5 表单 。 

运行 测试 这 个 页 面 ， 效 果 如 图 3.4 所 示 。 从 图 中 可 以 看 到 ， 当 用 户 在 URL 类 型 的 input 标签 
中 输入 不 合法 的 URL 地 址 时 ， 该 input 标签 的 边框 会 自动 加 粗 变 成 红色 ， 提 示 用 户 输入 的 URL 
地 址 有 误 。 

下 面 我 们 单 击 “ 提 交 网 址 ”按钮 运行 测试 这 个 页 面 ， 效 果 如 图 3.5 所 示 。 从 图 中 可 以 看 到 ， 
如 果 用 户 不 理会 提示 错误 ， 强 行 单 击 “ 提 交 网 址 ”按钮 ， 页 面 会 弹出 一 个 tooltip 提示 窗口 ， 告 
诉 用 户 “ 请 输入 一 个 URL”， 这 就 是 HTML 5 表单 的 新 特性 。 


所 村 localhost63342/html-css 加 器 © 


所 思 localhost63342/html-css 国 晤 7 C 为 


HTML5 表 单 之 URL 类 型 input 标 答 元 素 HTML5 表 单 之 URL 类 型 input 标 答 元 素 
EN-_ 个 URL 
图 34 URL 类 型 input 标签 的 使 用 (一 ) 图 3.5 URL 类 型 input 标签 的 使 用 (二) 
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第 3 章 HTML 5 表单 


3.4 数值 类 型 的 input 标签 


本 节 我 们 介绍 HTML 5 表单 为 input 标签 设计 的 下 一 个 全 新 的 type 类 型 ， 也 就 是 数值 
Cnumber) 类型。 设置 成 number 类 型 的 input 标签 可 以 在 表单 提交 时 ， 自 动 验证 其 中 内 容 是 否 
为 合法 的 数值 类 型 。 

下 面 我 们 看 一 段 在 HTML 5 表单 中 使 用 数值 类 型 的 代码 ， 这 段 代 码 〈 参 见 源 代码 
chapter03/ch02-HTML Sform-inputnumberhtml 文件 ) 是 一 个 使 用 number 类 型 input 标签 的 方法 。 


【示例 3-3】 ”数值 类 型 input 标签 的 使 用 
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构建 移动 网 站 与 APP: HTML 5+CSS 3+jQuery Mobile 入 门 与 实战 


在 这 段 HTML 代码 中 ， 定 义 了 一 个 form 表单 及 三 个 input 标签 ， 下 面 我 们 详细 介绍 : 

第 21 一 28 行 代码 通过 form 标签 定义 了 一 个 HTML 5 表单 ， 其 中 action 属性 定义 为 提交 到 当 
前 页 面 ，method 属性 定义 为 "get" 方 式 ; 

第 22 一 23 行 代码 定义 了 第 一 个 type="number" 类 型 的 input 标签 ， 用 于 输入 月 份 : 第 23 行 代 
码 定 义 number 类 型 input 标签 时 ， 还 增加 了 min、max、step 和 value 属性 的 定义 ， 其 中 min 属 
性 用 于 定义 最 小 数值 (月 份 最 小 值 为 1 )，max 属性 用 于 定义 最 大 数值 (月 份 最 大 值 为 12)，step 
属性 用 于 定义 步 长 〈 步 长 值 为 1 )，value 属性 用 于 定义 初始 值 ; 

第 24 一 25 行 代码 定义 了 第 二 个 type="number" 类 型 的 input 标签 ， 用 于 输入 日 期 ; 第 25 行 代 
码 定义 number 类 型 input 标签 时 ，min 属性 用 于 定义 最 小 数值 〈 日 期 最 小 值 为 1)，max 属性 用 
于 定义 最 大 数值 (日 期 最 大 值 为 31)，step 属性 用 于 定义 步 长 〈 步 长 值 为 1)，value 属性 用 于 定 
义 初始 值 ; 

第 26 一 27 行 代码 定义 了 第 三 个 type="number" 类 型 的 input 标签 ， 用 于 输入 年 份 ， 第 27 行 代 
码 定 义 number 类 型 input 标签 时 ，min 属性 用 于 定义 最 小 数值 〈 年 份 最 小 值 为 2012)，max 属性 
用 于 定义 最 大 数值 〈 年 份 最 大 值 为 2020)，step 属性 用 于 定义 步 长 〈 步 长 值 为 4， 表 示 只 支持 六 
年 )，value 属性 用 于 定义 初始 值 (为 2016 年 )。 

运行 测试 这 个 页 面 ， 效 果 如 图 3.6 所 示 。 

理论 上 ， 使 用 input 标签 右 侧 的 上 下 箭头 调整 数值 ， 是 不 会 超出 我 们 定义 的 数值 范围 的 ， 步 
长 也 会 按照 设 定 值 调整 。 但 是 ， 如 果 我 们 手动 输入 了 不 合法 的 数值 ，HTML 5 表单 就 会 提醒 出 错 
了 ， 其 页 面 效果 如 图 3.7 所 示 。 从 图 中 可 以 看 到 ， 当 用 户 在 数值 类 型 的 input 标签 中 输入 超出 范 
围 的、 不 合法 的 数值 时 ， 该 input 标签 的 边框 会 自动 加 粗 变 成 红色 ， 提 示 用 户 输入 的 数值 有 误 。 


所 名 localhost63342/html-css 国 跨 " CGC 2 三 二 四 localhost63342/html-css 轩 器 * CC » 三 
HTML5 表 单 之 数值 类 型 input 标 签 元 素 HTML5 表 单 之 数值 类 型 input 标 签 元 素 
和 
1 [| 
日 期 日 期 : 
年 份 : 年 份 : 
2016 
图 3.6 ”数值 类 型 input 标签 的 使 用 (一) 图 3.7 数值 类 型 input 标 签 的 使 用 (二) 
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可 .5 使 用 日 期 选择 器 


本 节 我 们 介绍 HTML 5 表单 为 input 标签 设计 的 全 新 的 日 期 选择 器 〈datepicker) 类 型 。 
HTML 5 表单 提供 了 大 约 五 种 形式 的 日 期 选择 器 ， 包 括 按照 月 份 、 周 、 时 间 等 方式 。 

下 面 我 们 看 一 段 在 HTML 5 表单 中 使 用 日 期 选择 器 的 代码 ， 这 段 代 码 〈 参 见 源 代码 
chapter03/ch02-HTML 5form-input-datepicker.html 文件 ) 是 一 个 使 用 datepicker 类 型 input 标签 的 


方法 。 


【示例 3-4】 ”日 期 选择 器 类 型 input 标签 的 使 用 
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在 这 段 HTML 代码 中 ， 定 义 了 一 个 form 表单 及 五 个 input 标签 : 第 21 一 32 行 代码 通过 
form 标签 定义 了 一 个 HTML 5 表单 ， 其 中 action 属性 定义 为 提交 到 当前 页 面 ，method 属性 定义 
为 “get ”方式 ;第 22 一 23 行 代码 定义 了 第 一 个 type="date" 类 型 的 日 期 选择 器 。 

运行 测试 这 个 页 面 ， 单 击 input 标签 右 侧 的 下 拉 箭 头 ，"date" 类 型 日 期 选择 器 的 效果 如 图 3.8 
所 示 。 

第 24 一 25 行 代码 定义 了 第 二 个 type="month" 类 型 的 日 期 选择 器 ， 运 行 测试 这 个 页 面 ， 单 击 
input 标签 右 侧 的 下 拉 箭 头 ，"month" 类 型 日 期 选择 器 的 效果 如 图 3.9 所 示 。 


好 opem| - 口 x WD opers - 0O x 
由 HTMLS 表 浊 之 日 其 二 吕 x | 十 二 吴 HTML5 雪 单 之 日 时 过 器 x | 十 三 
Cw [8| localhost63342/html-cssjquery/chapy | 时 | 国 «FC | localhost63342/html-cssjqvery/chapt | 里 | 国 
HTVL5 表 单 之 日 期 选择 器 HTVML5 表 单 之 日 期 选择 器 
Date: Nonth: 
六 VA/E Sv 年 -月 Sv 
2015 年 1 月 = 四 四 四 2015 生 12 月 ~ 国 加 四 
冉 - 网- 周 = 周 四 周二 局 局 日 


0 1 2 3 4 5 6 
7 8s8[9li 1 1 4 
14 15 1 1 1 +9 20 
21 22 23 24 25 20 27 
28 29 30 31 1 


图 3.8 "date" 类 型 日 期 选择 器 图 3.9 "month" 类 型 日 期 选择 器 
第 26 一 27 行 代码 定义 了 第 三 个 type="week" 类 型 的 日 期 选择 器 ， 运 行 测试 这 个 页 面 ， 单 击 
input 标签 右 侧 的 下 拉 箭 头 ，"week" 类 型 日 期 选择 器 的 效果 如 图 3.10 所 示 。 


第 28 一 29 行 代码 定义 了 第 四 个 type="time" 类 型 的 日 期 选择 器 ， 运 行 测试 这 个 页 面 ， 单 击 


input 标签 右 侧 的 下 拉 箭 头 ，"time" 类 型 日 期 选择 器 的 效果 如 图 3.11 所 示 。 
MD opers 


= 本 这 WM opers = 特 % 
里 HTMI15 雪 单 之 日 期 选择 器 x | 十 于 晨 HTML5 雪 单 之 日 期 先 径 器 x | 十 三 
4 二 C i9 localhost53342/html-cssjquery/chapy | 秘 | 国 所 2 CC 吕 | 四 | ocalhost53342/html-cssjquery/chapt 里 | 国 
HTML5 表 单 之 日 期 选择 器 HTML5 表 单 之 日 期 选择 器 
Week: Tine: 
| 于 年 第 一 月 Sv 10- 面 x3 
三 中 下 | DateTime: 
2015 年 1 月 ~ 回国 区 ee 
月 请 民用 着 局 i 已 | Pa 
|a123 4 5 6 人 
| rey 
51 17 18 1 20 
52 2 4 25 2 2 2 
5312 2 30 31 1 2 一 年 第 一 周 
图 3.10 "week" 类 型 日 期 选择 器 


图 3.11 "time" 类 型 日 期 选择 器 
92 


第 3 章 HTML 5 表单 


第 30~31 行 代码 定义 了 第 五 个 type="datetime" 类 型 的 日 期 选择 器 ， 运 行 测试 这 个 页 面 ， 单 
击 input 标签 右 侧 的 下 拉 箭 头 ，"datetime" 类 型 日 期 选择 器 的 效果 如 图 3.12 所 示 。 


open - 0 
虹 HTMLS5 去 之 昌 二 S 叶 x | 十 


x 


二 3 C EF |©| locahost53342/htmcss jquery/chapt | 时 


© 


HTML5 表 单 之 日 期 选择 器 


DateTime: 


7 8 9]10 人 1 
14 15 16 1 9 20 
21 2 23 24 2 2 27 
30 31 


图 3.12 "datetime" 类 型 日 期 选择 器 


了 .6 用 datalist 来 实现 自动 提示 


本 节 我 们 介绍 使 用 HTML 5 表单 的 datalist 类 型 标签 实现 自动 提示 的 功能 。 在 HTML 5 规范 
标准 中 ，datalist 类 型 标签 用 于 定义 选项 列表 ， 并 与 input 标签 配合 来 使 用 。 实 际 应 用 中 ，datalist 
中 的 选项 不 会 被 显示 出 来 ， 其 仅仅 提供 合法 的 输入 值 列 表 。 

下 面 我 们 看 一 段 在 HTML 5 表单 中 使 用 datalist 类 型 标签 的 代码 ， 这 段 代码 〈 参 见 源 代码 
chapter03/ch02-HTML 5form-input-datalist.html 文件 ) 是 一 个 使 用 datalist 类 型 标签 的 方法 。 


【示例 3-5】 ”数值 类 型 input 标签 的 使 用 
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在 这 段 HTML 代码 中 ， 定 义 了 一 个 form 表单 、 一 个 input 标签 和 一 个 datalist 标签 ， 下 面 我 
们 详细 介绍 : 

第 21 一 31 行 代码 通过 form 标签 定义 了 一 个 HTML 5 表单 ， 其 中 action 属性 定义 为 提交 到 当 
前 页 面 ，method 属性 定义 为 “get” 方 式 ; 

第 22 一 23 行 代码 定义 了 一 个 type="text" 类 型 的 input 标签 ， 并 通过 list 属性 〈list"web") 绑 
定 其 后 的 datalist 标签 选项 ; 

第 24 一 30 行 代码 定义 了 一 个 datalist 类 型 的 标签 ， 并 通过 id 值 (id="web") 绑 定 在 上 面 的 
input 标签 上 ， 第 24 一 29 行 代码 通过 option 标签 定义 一 组 可 选 的 选项 值 。 

运行 测试 这 个 页 面 ， 单 击 input 标签 右 侧 的 下 拉 按 钮 ， 效 果 如 图 3.13 所 示 。 如 果 我 们 在 
input 标签 中 输入 第 一 个 字符 “H”， 会 自动 提示 首 字 母 为 “H” 的 选项 值 ， 其 效果 如 图 3.14 
所 示 。 

ya = 


Popers ss - 蜡 


站 x 
入 HTML5 委 单 忆 datalists x | 十 专 入 HTML5 委 章 Zdatalist5 X | 十 专 
+ + © w | locahosts3342/mimicsjqvey/hapn | | 国 + G |O loclhost63342/hunicsjavery/hapt | 和 P| 国 
HTWL5 表 单 之 使 用 datalist 标 签 元 素 实现 自动 提示 HTML5 表 单 之 使 用 datalist 标 签 元 素 实现 自动 提示 
DataList: DataList: 
LHTML5 
图 3.13 ”datalist 类 型 标签 的 使 用 (一) 图 3.14 datalist 类 型 标签 的 使 用 (二 ) 
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如 果 我 们 在 input 标签 中 输入 第 一 个 字符 “j”， 会 自动 提示 首 字 母 为 “j” 的 选项 值 ， 其 效果 
如 图 3.15 所 示 。 从 图 中 可 以 看 到 ， 首 字母 不 区 分 大 小 写 ， 输 入 字母 “j” 后 ,“JavaScript” 和 
“jQuery” 选 项 值 全 部 出 现在 自动 提示 框 之 中 了 。 


VD open = 
峰 HTML5 到 单 之 datalist” X | 十 


» C 号 || ocalhost63342/html-cssjquery/chapt | 多 


和 四 川 X 


HTVL5 表 单 之 使 用 datalist 标 签 元 素 实现 自动 提示 


DataList: 


图 3.15 datalist 类 型 标签 的 使 用 (三 ) 


本 . 7 名 浏览 器 对 HTML 5 表单 新 类 型 的 支持 


本 章 前 面 几 个 小 节 主要 介绍 了 HTML 5 表单 提供 的 一 些 新 特性 。 细 心 的 读者 一 定 发 现 了 ， 
在 介绍 E-mail 类 型 和 URL 类 型 的 input 标签 时 ， 测 试 页 面 我 们 使 用 的 是 FireFox 浏览 器 ， 而 在 介 
绍 日 期 选择 器 时 ， 我 们 使 用 的 是 Opera 浏览 器 。 这 是 因为 各 个 浏览 器 对 HTML 5 表单 新 特性 的 
支持 度 是 不 一 样 的 ， 有 些 支持 得 很 好 ， 有 些 支 持 得 不 足 。 该 问题 也 是 设计 人 员 常 常 提 到 的 浏览 器 
兼容 性 问题 的 一 种 ， 是 个 考验 开发 水 平 的 问题 。 

下 面 我 们 提供 各 个 主流 浏览 器 对 HTML 5 表单 支持 情况 ， 如 表 3-1 所 示 〔 该 表格 部 分 结果 引 
用 了 一 些 开 源 代码 组 织 提供 的 研究 结果 )， 表 中 内 容 仅 供 读者 参考 。 


表 3-1 各 主流 浏览 器 对 HTML 5 表单 支持 情况 


< Firefox 
剖 遇 不 支持 支持 支持 (40 版 ) | 支持 不 支持 
| un | 不 支持 支持 支持 (40 版 ) | 支持 不 支持 
| | 不 支持 支持 不 支持 支持 不 支持 
| patepicker 。 | 不 支持 支持 不 支持 支持 不 支持 
| datatist | 不 支持 支持 不 支持 支持 不 支持 
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3.8 小 结 


本 章 主 要 介绍 了 HTML 5 表单 的 新 特性 ， 包 括 E-mail 类 型 、URL 类 型 、Number 类 型 和 
DatePicker 类 型 的 input 标签 的 使 用 方法 ， 另 外 还 介绍 了 使 用 新 的 datalist 类 型 标签 实现 自动 提示 
功能 的 方法 。 和 希望 HTML 5 的 新 特性 能 给 广大 读者 带 来 全 新 的 体验 。 
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本 章 我 们 介绍 一 下 HTML 5 具有 哪些 新 的 特性 ， 其 给 Web 前 端 技术 带 来 了 哪些 质 的 变化 。 
HTML 5 技术 是 融合 了 HTML、CSS 与 JavaScript 大 部 分 优点 的 综合 体 ， 可 以 讲 其 未 来 是 Web 
2.0 技术 的 集大成 者 。 从 目前 HTML 5 展现 出 来 的 特色 来 看 ， 其 与 传统 HTML 技术 相 比 确实 有 明 
显 的 提升 ， 且 随 着 不 断 地 完善 还 能 为 我 们 带 来 更 大 的 惊喜 ， 拭 目 以 待 吧 ! 

本 章 主要 包括 以 下 内 容 : 


@ HTML 5 新 特性 
@@ 。 Web 储存 和 应 用 缓存 
@ HTML 5 本 地 存储 


人 外 .1 HTML 5 之 新 特性 


微 信 的 发 展 带动 了 HTML 5 的 火爆 ， 如 今 要 说 不 会 HTML 5， 就 不 能 说 会 编写 网 页 了 ， 本 节 
我 们 主要 介绍 HTML 5 的 新 特性 ， 让 读者 知道 都 有 哪些 网 页 形式 发 生 了 质 的 改变 。 


4.1.1 语义 化 标签 元 素 


早期 在 HTML+CSS 技术 路 线 下 ， 设 计 人 员 会 使 用 大 量 的 层 〈div ) 标签 元 素 ， 其 实 这 些 div 
标签 元 素 通常 都 是 没有 实际 意义 的 ， 一 般 都 是 使 用 id 或 class 来 赋予 其 含义 。 

如 今 ，HTML 5 规范 提供 了 很 多 更 加 语义 化 的 结构 化 代码 标签 来 代替 大 量 的 无 意义 的 div 标 
签 元 素 。HTML 5 使 用 这 种 语义 化 的 新 特性 ， 不 但 提升 了 网 页 的 可 读 性 ， 还 减少 了 以 前 大 量 使 用 
CSS 定义 id 和 class 属性 的 情况 。 

HTML 5 常用 的 语义 标签 元 素 主 要 有 : 
article 标签 元 素 : 定义 外 部 的 内 容 ， 壁 如 一 篇 文档 ; 
aside 标签 元 素 : 定义 article 标签 元 素 以 外 的 内 容 ， 其 内 容 可 以 作为 文档 的 侧 边栏 ; 
figure 标签 元 素 : 用 于 对 元 素 进行 组 合 ， 使 用 figcaption 元 素 为 元 素 组 添加 标题 ; 
figcaption 标签 元 素 : 定义 figure 元 素 的 标题 ; 
header 标签 元 素 : 定义 文档 页 眉 ; 
footer 标签 元 素 : 定义 文档 页 脚 ; 
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@ 。 section 标签 元 素 : 定义 文档 中 的 节 ; 

@ ”hgroup 标签 元 素 : 用 于 对 section 或 网 页 的 标题 进行 组 合 ， 使 用 figcaption 标签 元 素 为 
元 素 组 添加 标题 ; 

@ nav 标签 元 素 : 定义 导航 链接 部 分 ; 

@ time 标签 元 素 : 定义 日 期 或 时 间 。 


下 面 我 们 看 一 段 应 用 HTML 5 语义 化 标签 元 素 的 代码 ， 这 段 代 码 〈 参 见 源 代码 
chapter04/ch04-HTML 5-new-tag.html 文件 ) 是 一 个 使 用 HTML 5 语义 化 标签 元 素 定义 页 面 结构 的 
方法 。 

【示例 4-1】 语义 化 标签 元 素 


在 这 段 HTML 代码 中 ， 使 用 了 HTML 5 的 语义 化 标签 元 素 定义 了 页 面 结构 ， 下 面 我 们 详细 
介绍 : 

第 11 一 13 行 代码 使 用 header 标签 元 素 定义 了 页 面 页 眉头 部 )， 其 中 ， 第 12 行 代码 使 用 
nav 标签 元 素 定义 了 页 面 导航 链接 ; 

第 14 一 17 行 代码 使 用 div 标签 元 素 定义 了 页 面 主体 ; 其 中 ， 第 15 行 代码 使 用 section 标 
签 元 素 定 义 了 页 面 主体 部 分 的 节 ， 第 16 行 代码 使 用 aside 标签 元 素 定义 了 页 面 主体 部 分 的 侧 
边栏 ; 

第 18 行 代码 使 用 footer 标签 元 素 定义 了 页 面 页 脚 〈 底 部 )。 

运行 测试 这 个 页 面 ， 效 果 如 图 4.1 所 示 。 从 图 中 看 到 ，HTML 5 语义 化 标签 元 素 header、 
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section、aside 和 footer 在 页 面 中 的 位 置 与 其 含义 很 吻合 。 
党 La x 


震 HTML5 新 特性 之 语义 .. XX 于 


€ © CEE 7 c|» 


footer 


图 4.1 语义 化 标签 元 素 的 效果 


4.1.2 CSS 3 新 特性 


CSS 3 提供 了 许多 新 特性 ， 璧 如 圆 角 、 阴 影 、 旋 转 、 动 画 、 背 景 渐变 等 ， 同 时 还 提供 了 更 加 
丰富 的 CSS 选择 器 。 下 面 我 们 来 详细 介绍 。 


@ RGBa: RGBa 新 特性 允许 设计 人 员 对 每 个 元 素 的 色彩 以 及 透明 度 进 行 设置 ; 

@ ”多 栏 布局 选择 器 ( Multircolumn layout ) : 多 栏 布局 选择 器 不 需要 传统 的 HTML 布局 标 
签 就 可 以 生成 多 栏 布局 ， 同 时 其 “ 栏 数 ”、“ 栏 宽 ” 以 及 “ 栏 间距 ” 均 可 定义 ; 

@ 角 (Round corners ) : 通过 圆 角 功 能 设计 人 员 可 以 给 任何 HTML 标签 元 素 添加 
角 ， 同 时 圆 角 的 大 小 尺寸 风格 均 是 可 定义 的 ; 

@ 。 @font- 包 ce: 如 果 网 页 定义 了 某 种 本 机 没有 安装 的 字体 ，CSS 3 提供 的 @font-face 功能 
会 自动 在 后 台 从 网 络 上 下 载 相 应 的 字体 。 


此 外 ，CSS 3 还 提供 了 渐变 、 多 重 背景 、 图 片 边框 背景 和 防止 字符 串 长 度 溢出 等 非常 实用 的 
功能 。 

将 CSS 3 的 新 特性 与 HTML 5 的 新 特性 充分 结合 起 来 ， 可 以 实现 以 前 只 能 由 图 片 才能 完成 
的 任务 ， 同 时 还 可 以 被 搜索 引擎 检索 。 


4.1.3 音频 、 视 频 与 多 媒体 


HTML 5 规范 标准 对 多 媒体 技术 提供 了 很 好 的 支持 ， 包 括 一 些 音频 与 视频 格式 的 多 媒体 文 
件 ， 都 可 以 在 HTML 5 页 面 中 直接 进行 播放 。 早 期 HTML 多 媒体 技术 通常 是 需要 第 三 方 插件 才 
可 以 实现 的 功能 ， 在 HTML 5 规范 标准 下 仅仅 需要 几 行 代码 就 可 以 实现 了 。 

下 面 我 们 看 一 段 应 用 HTML 5 多 媒体 功能 的 代码 ， 这 段 代码 〈 参 见 源 代码 chapter04/ch04- 
HTML 5-audio-video.html 文件 ) 是 一 个 使 用 HTML 5 的 audio 和 video 标签 元 素 的 方法 。 
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【示例 42】 HTML 5 多 媒体 


在 这 段 HTML 代码 中 ， 使 用 了 HTML 5 的 audio 音频 标签 元 素 和 video 视频 标签 元 素 ， 下 面 


我 们 详细 介绍 : 
第 16 一 18 行 代码 使 用 audio 标签 元 素 定义 了 一 个 音频 播放 器 ， 其 中 src 属性 用 于 定义 音频 文 
件 地 址 ，HTML 5 规范 中 ， 目 前 只 支持 wav 和 ogg 这 两 种 音频 格式 ; 
第 21 一 28 行 代码 使 用 video 标签 元 素 定 义 了 一 个 视频 播放 器 ; 其 中 ， 第 23 行 代 码 定义 了 一 
个 button 标签 元 素 ， 用 于 执行 视频 播放 和 和 暂停 的 操作 ;第 24 一 27 行 代码 使 用 video 标签 元 素 定 
义 了 视频 播放 器 的 样式 风格 ; 第 25 行 代码 使 用 source 标签 元 素 定义 了 视频 文件 ，src 属性 用 于 定 
义 音 视频 文件 地 址 ，type 属性 用 于 定义 视频 文件 格式 ; HTML 5 规范 中 ， 目 前 只 支持 MP4、ogg 
和 WebM 这 三 种 视频 格式 ; 
第 30 行 的 脚本 代码 获取 了 视频 播放 器 的 控件 id; 
第 31 一 36 行 的 脚本 代码 定义 了 一 个 函数 方法 playPause0， 用 于 执行 视频 播放 和 暂停 的 操 
作 ; 该 函数 方法 是 对 第 23 行 代码 中 button 标签 元 素 中 onclick 事件 方法 的 实现 。 
运行 测试 这 个 页 面 ， 效 果 如 图 4.2 所 示 。 从 图 中 看 到 ，HTML 5 提供 的 音 视频 标签 元 素 对 于 
实现 网 页 多 媒体 功能 是 很 简单 的 。 
日 HTML5 新 符 性 之 多 媒体 X 市 一 [a1 x 
(©) w= 
HTML5 新 特性 之 多 媒体 


HTMLs 音 频 播 旅 器 


HTML3S 视 频 播放 器 


[ 氮 帮 入 停 | 


图 4.2 HTML 5 多 媒体 


4.1.4 画布 Canvas 


HTML 5 规范 标准 提供 了 一 个 全 新 的 画布 〈canvas) 标签 元 素 ， 该 画布 是 一 个 矩形 区 域 ， 设 
计 人 员 可 以 使 用 JavaScript 脚本 语言 在 画布 内 绘制 图 像 。 同 时 ， 画 布 (canvas) 标签 元 素 拥有 多 
种 绘图 方法 ， 壁 如 : 路 径 、 和 矩形 、 圆 形 、 字 符 以 及 添加 图 像 等 。 

画布 (canvas) 标签 元 素 的 绘图 方法 都 没有 定义 在 canvas 标签 元 素 本 身上 ， 而 是 定义 在 通过 
画布 的 getContext0 方 法 获得 的 一 个 “绘图 环境 ”对 象 上 。 夯 布 (canvas) 标签 元 素 没 有 对 绘制 文 
本 提供 任何 支持 ， 如 果 想 在 画布 中 加 入 文本 ， 则 需要 绘制 文本 后 与 画布 进行 组 合 ， 或 者 在 画布 上 
方 使 用 CSS 定位 来 覆盖 HTML 文本 。 
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下 面 我 们 看 一 段 应 用 HTML 5 画布 (canvas) 标签 元 素 的 代码 ， 这 段 代码 (参见 源 代码 
chapter04/ch04-HTML 5-canvas.html 文件 ) 是 一 个 使 用 HTML 5 的 audio 和 video 标签 元 素 的 
方法 。 

【示例 4-3】 HTML 5 画布 canvas 
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在 这 段 HTML 代码 中 ， 使 用 了 HTML 5 的 画布 (canvas) 标签 元 素 进 行 了 绘图 操作 ， 下 面 
我 们 详细 介绍 : 

第 19 一 22 行 代码 使 用 画布 canvas) 标签 元 素 定义 了 一 个 宽度 为 300、 高 度 为 200 的 带 边框 
的 画布 区 域 ， 其 中 ， 第 20 行 代码 定义 了 onmousemove 事件 方法 函数 "canvas_getCoordinates(event)"， 
第 21 行 代码 定义 了 onmouseout 事件 方法 函数 "canvas_clearCoordinates()"; 

第 27 一 60 行 代码 定义 了 一 段 操作 画布 canvas) 标签 元 素 的 脚本 代码 ; 

第 29 行 的 脚本 代码 获取 了 画布 canvas) 标签 元 素 的 id 值 对 象 ; 第 31 行 的 脚本 代码 通过 
getContext() 方 法 获取 了 环境 上 下 文 对 象 (context 对 象 ); 第 33 行 的 脚本 代码 通过 fillStyle 方法 定 
义 了 画布 填充 风格 ; 第 35 行 的 脚本 代码 通过 filRect() 方 法 绘制 画布 填充 矩形 ; 

第 37 行 的 脚本 代码 通过 beginPath() 方 法 定义 画布 开始 路 径 ; 第 39 行 的 脚本 代码 通过 arc() 方 
法 定义 绘制 画布 圆 形 ;第 41 行 的 脚本 代码 通过 closePath() 方 法 定义 画布 结束 路 径 ， 第 43 行 的 脚 
本 代码 通过 fil() 方 法 定义 画布 填充 图 形 ， 第 45 行 的 脚本 代码 通过 font 方法 定义 画布 字体 ; 

第 47 行 的 脚本 代码 通过 filText() 方 法 定义 画布 绘制 文字 ; 第 49 一 54 行 的 脚本 代码 定义 一 个 
函数 方法 canvas_getCoordinates()， 是 对 第 20 行 代码 中 函数 方法 的 实现 ， 其 主要 功能 是 获取 画布 


103 


构建 移动 网 站 与 APP: HTML 5+CSS 3+jQuery Mobile 入 门 与 实战 


(canvas) 标签 元 素 内 部 的 坐标 值 ; 

第 56 一 59 行 的 脚本 代码 定义 了 一 个 函数 方法 canvas_clearCoordinates()， 是 对 第 21 行 代码 中 
函数 方法 的 实现 ， 其 主要 功能 是 清除 画布 canvas) 标签 元 素 内 部 的 坐标 值 。 

运行 测试 这 个 页 面 ， 效 果 如 图 4.3 所 示 。 从 图 中 看 到 ， 在 画布 canvas) 标签 元 素 中 成 功 绘 
制 了 矩形 、 圆 形 和 文字 ， 并 将 获取 的 坐标 值 显 示 在 画布 下 方 。 由 此 可 见 ，HTML 5 规范 标准 提供 
的 画布 canvas) 标签 元 素 的 绘图 功能 是 十 分 强大 的 。 


三 口 X 
是 HTML5 新 行 性 之 画布 X 是 


€ 多 localhost63342/html-c 加 中 C » 


HTML5 新 特性 之 画布 ( canvas ) 标签 元 素 


画布 (canvas) 标签 元 素 


画布 ( canvas ) 坐标 : (253,122) 


图 43 HTML 5 画布 canvas 


4.1.5 本 地 文件 访问 


HTML 5 规范 标准 提供 了 一 个 全 新 的 本 地 文件 访问 API 接口 (FileReader)， 设 计 人 员 可 以 通 
过 该 接口 读 取 本 地 文件 。FileReader 接口 的 使 用 方式 非常 简单 ， 其 提供 了 读 取 文件 的 方法 和 包含 
读 取 结 果 的 事件 模型 。 

根据 W3C 的 HTML 5 标准 中 的 说 明 ，FileReader 接口 实例 拥有 4 个 方法 ， 其 中 3 个 方法 用 
来 读 取 文件 ， 另 一 个 方法 用 来 中 断 读 取 。 下 面 我 们 简单 描述 一 下 这 4 个 方法 : 

@ 方法 : readAsText(file, [encoding]) 功 能 : 将 文件 读 取 为 文本 

@ 方法 : readAsDataURL(file) 功能 : 将 文件 读 取 为 DataURL 

@ 方法 : readAsBinaryString(file) ”功能 : 将 文件 读 取 为 二 进 制 码 

@ 方法 : abort0 功能 : 中 断 读 取 文件 

读者 需要 注意 无 论 读 取 文件 操作 成 功 还 是 失败 ， 以 上 方法 并 不 会 返回 读 取 结果 ， 而 是 将 这 
一 结果 存储 在 result 属性 中 。 同 时 ，FileReader 接口 实例 还 包含 了 完整 的 事件 模型 ， 用 于 捕获 读 
取 文 件 时 的 状态 。 下 面 我 们 简单 描述 一 下 这 些 事 件 : 


@@ 。 onabort: 中 断 时 触发 
@ onerror: 出 错时 触发 
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onload: 文件 读 取 成 功 完 成 时 触发 
onloadend: 读 取 完 成 触发 ， 无 论 成 功 或 失败 
onloadstart: 读 取 开 始 时 触发 

onprogress: 读 取 中 


读 取 文 件 操作 一 旦 开始 ，result 属性 都 会 被 填充 (无 论 操作 成 功 或 失败 ， 如 果 读 取 成 功 则 


Tesult 的 值 为 读 取 的 结果 ， 如 果 读 取 失 败 则 result 的 值 为 null) 。 


下 面 我 们 看 一 段 应 用 FileReader 接口 的 代码 ， 这 段 代码 (参见 源 代码 chapter04/ch04-HTML 
5-filereader.html 文件 ) 是 一 个 使 用 FileReader 接口 读 取 本 地 文本 文件 的 方法 。 


【示例 4-4】 HTML 5 之 FileReader API 
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在 这 段 HTML 代码 中 ， 使 用 了 HTML 5 的 FileReader API 进行 了 读 取 本 地 文本 文件 的 操 
作 ， 下 面 我 们 详细 介绍 : 

第 37 一 45 行 代码 使 用 form 标签 元 素 定义 了 一 个 表单 用 于 读 取 本 地 文本 文件 ， 其 中 ， 第 
40 一 41 行 代码 定义 了 一 个 type="file" 的 input 标签 元 素 ， 并 注册 了 一 个 onChange 事件 函数 方法 
fileReader_readAsText(this.files); 第 43 行 代码 定义 了 一 个 article 标签 元 素 ， 用 于 显示 读 取 到 的 文 
本 文件 的 内 容 ; 

第 47 一 59 行 代码 是 对 第 41 行事 件 函数 方法 fleReader readAsText(this.files) 的 具体 实现 ; 


第 49 一 51 行 代码 是 检测 浏览 器 是 否 支持 FileReader 对 象 的 方法 ; 
第 52 行 代码 定义 了 一 个 文件 数组 变量 他， 用 于 保存 读 取 到 的 文件 句柄 ; 
第 53 行 代码 创建 了 一 个 FileReader 对 象 reader; 


第 54 行 代码 调用 reader 对 象 的 readAsText0 函 数 方法 将 文件 读 取 为 文本 ， 并 定义 了 编码 格式 
为 “utf-8”; 


第 55 行 代码 调用 reader 对 象 的 onload 事件 方法 将 读 取 到 的 文本 内 容 〔 保 存在 result 属性 
中 ) 显示 到 页 面 指定 的 区 域 中 。 


运行 测试 这 个 页 面 ， 效 果 如 图 4.4 所 示 。 从 图 中 看 到 ， 页 面 有 一 个 选择 本 地 文件 的 浏览 按 
钮 。 然 后 ， 我 们 点 击 该 按钮 选择 一 个 本 地 文本 文件 ， 页 面 效果 如 图 4.5 所 示 。 


= | x 
旺 HM5EZ 右 x 


和 | 图 iocalhost63342/html 7 CQ 规 过 2 三 
HTML5 新 特性 之 FileReader 接 口 
读 取 本 地 文本 文件 - 


济 星 | 直选 择 立 件 - 
文本 文件 内 容 : 


图 44 HTML 5 之 FileReader API 效果 (一 ) 


x 
vo Searchot 7 
:me 
Date modified Type 
O242237 Tea Document 
= LocalDisk (F) ~ 
File name: |FileReader bet ~] [所 有 文件 (四 ~ 
a 


图 4.5 HTML 5 之 FileReader API 效 果 (二 ) 


选择 一 个 本 地 的 文本 文件 (FileReadertxt)， 打 开 该 文件 后 的 页 面 效 果 如 图 4.6 所 示 。 文 本 文 
件 (FileReadertxt) 中 的 内 容 成 功 在 页 面 中 显示 出 来 了 。 
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所 力 Ioaalhost63342/html ” G A 提 天 » 三 


File Reader APT 


:rendAsBi 
志方 法 ，abort0 


图 46 HTML 5 之 FileReader API 效果 (三 ) 


4.1.6 ”开放 字体 格式 WOFF 


WOFF 是 Web 开放 字体 格式 (“Web Open Font Format) 的 简称 ， 是 W3C 组 织 所 推荐 的 一 种 
全 新 的 网 页 所 采用 的 字体 格式 标准 。WOFF 字体 格式 不 但 能 够 通过 有 效 的 压缩 来 减 小 文档 ， 同 
时 不 包含 加 密 ， 也 不 受 DRM (数位 著作 权 管 理 ) 的 限制 。 

WOFF 字体 格式 最 初 是 于 2010 年 4 月 由 Mozilla 基金 会 、Opera 软件 公司 和 微软 公司 提交 
W3C 组 织 的 。W3C 组 织 希望 WOFF 将 来 可 以 成 为 所 有 浏览 器 都 支持 的 、 单 一 的 、 可 互 操作 的 

(字体 ) 格式 ， 并 于 2010 年 7 月 27 日 将 WOFF 作为 工作 草案 进行 发 布 。 

WOFF 字体 格式 的 MIME 类 型 是 application/x-font-woff， 早 前 的 IIS 服务 器 内 默认 是 没有 这 
个 MIME 类 型 的 ， 需 要 Web 管理 员 手动 添加 WOFF 类 型 ， 不 过 目前 最 新 的 Windows Azure 是 支 
持 这 个 MIME 类 型 的 。 


4.1.7 ”地 理 定位 


HTML 5 新 推出 了 一 项 地 理 定位 功能 ， 类 似 于 Google Map 中 的 定位 功能 ， 虽 然 没 有 Google 
Map 那么 强大 ， 但 想 想 可 以 在 HTML 网 页 中 直接 进行 地 理 定 位 ， 也 算是 激动 人 心 的 事情 。 

HTML 5 的 地 理 定位 使 用 的 是 HTML 5 Geolocation API， 目 前 的 主流 浏览 器 均 可 以 支持 
该 功能 。 而 且 ， 如 果 用 户 终端 支持 GPS 功能 ，HTML 5 Geolocation API 定位 的 位 置 会 更 加 准 
确 。 另 外 ， 由 于 地 理 定位 功能 可 能 会 侵犯 用 户 隐私 ， 建 议 除非 用 户 同 意 ， 否 则 用 户 位 置信 息 
是 不 可 用 的 。 

下 面 我 们 看 一 段 应 用 HTML 5 Geolocation API 获取 地 理 定位 的 代码 ， 这 段 代码 (参见 源 代码 
chapter04/ch04-HTML 5-geolocation-getCurrentPosition.html 文件 ) 是 一 个 使 用 HTML 5 Geolocation API 获 
取 用 户 地 理 位 置 的 方法 。 


【示例 4-5】 HTML 5 之 Geolocation API 获取 地 理 定位 
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在 这 段 HTML 代码 中 ， 使 用 了 HTML 5 的 Geolocation API 进行 了 获取 地 理 定位 的 操作 ， 下 
面 我 们 详细 介绍 : 

第 26 行 代码 使 用 button 标签 元 素 定义 了 一 个 按钮 控件 ， 并 注册 了 一 个 onclick 事件 方法 
getLocation(); 

第 27 行 代码 使 用 div 标签 元 素 定 义 了 一 个 层 区 域 ， 用 于 显示 用 户 地 理 位 置 的 信息 ; 

第 29 行 的 脚本 代码 获取 了 第 27 行 代码 定义 的 div 标签 元 素 的 id 值 ; 

第 31 一 38 行 的 脚本 代码 定义 了 一 个 函数 方法 ， 是 对 第 26 行 代码 中 的 事件 方法 getLocation() 
的 具体 实现 ， 第 32 行 代码 通过 判断 浏览 器 是 否 支 持 navigator.geolocation 属性 来 判断 浏览 器 是 否 
支持 地 理 定位 功能 ， 第 33 行 代码 通过 调用 Geolocation API 的 getCurrentPosition() 函 数 方法 来 获 
取 用 户 的 地 位 定位 信息 ， 并 通过 showPosition 参数 进行 传递 ; 

第 40 一 43 行 的 脚本 代码 定义 了 一 个 函数 方法 showPosition(position)， 是 对 第 33 行 脚本 代码 
中 showPosition 参数 的 具体 实现 ; 第 41 行 脚本 代码 通过 position.coords.latitude 属性 获取 纬度 信 
息 ; 第 42 行 脚 本 代码 通过 position.coords.longitude 属性 获取 经 度 信息 ; 最 后 ， 将 获取 的 地 理 定 
位 信息 显示 在 页 面 中 id 值 为 “pos” 的 区 域 中 。 

运行 测试 这 个 页 面 ， 效 果 如 图 4.7 所 示 。 从 图 中 看 到 ， 页 面 有 一 个 “获取 您 的 坐标 ”按钮 。 
然后 ， 我 们 点 击 该 按钮 ， 页 面 效果 如 图 4.8 所 示 。 从 中 看 到 ， 用 户 的 地 理 位 置信 息 《〈 经 纬度 ) 成 
功 显示 在 按钮 下 方 的 区 域 之 中 了 。 


日 HrMus 亲 竺 性 2 地 理 人 X 市 OO Xx| GHz x 二 = 

€ 人 > ©O | mememebsnmpr 女 | 三 € SF ©O | aemewbsompr DO 女 | 三 
HTML5 新 特性 之 地 理 位 置 HTML5 新 特性 之 地 理 位 置 

点 击 下 面 按钮 来 获得 您 的 坐标 : 点 击 下 面 按钮 来 获得 您 的 坐标 : 

获取 您 的 坐标 获取 您 的 坐标 


Latitude: 39.74009 
Longitude: 116.14664 


4.7 ”Geolocation API 获取 地 理 定位 (一 ) 4.8 Geolocation API 获取 地 理 定位 (二 ) 


4.1.8” 微 数据 


为 了 提高 网 页 语义 化 的 功能 ，W3C 组 织 针 对 HTML 5 规范 推出 了 一 个 全 新 的 微 数 据 
(Microdata) 概 念 。 那 么 ， 微 数据 是 个 什么 概念 呢 ?” 概 括 来 讲 ， 微 数据 是 为 了 方便 机 器 识别 而 
产生 的 东西 ， 其 有 特定 的 规范 与 格式 ， 可 以 丰富 搜索 引擎 的 网 页 摘要 。 

微 数据 改变 了 传统 HTML 网 页 的 表现 形式 ， 赋 予 其 新 的 语义 含义 。 对 于 网 页 中 的 内 容 ， 可 
以 通过 微 数 据 来 定义 内 嵌 属 性 (名 字 - 值 》 的 方式 ， 来 表达 网 页 中 内 容 元 素 的 语义 。 相 当 于 设计 
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人 员 有 了 一 种 全 新 的 方式 ， 来 添加 网 页 内 容 元 素 的 额外 语义 信息 。 


上 面 是 W3C 官方 对 于 微 数据 〈(Microdata) 的 概括 ， 解 释 得 可 能 比较 抽象 ， 对 于 读者 不 太 好 
理解 。 下 面 我 们 看 一 个 W3C 官方 给 出 的 示例 代码 ， 这 段 代 码 是 一 个 使 用 微 数据 的 代码 。 


【示例 4-6】 HTML 5 之 微 数 据 示例 


在 这 段 HTML 代码 中 ， 使 用 了 我 们 初次 见 到 的 HTML 5 关键 字 itemscope 和 itemprop， 其 中 
itemscope 属性 创建 了 一 个 条 目 ， 而 itemprop 属性 是 itemscope 属性 的 子 属性 ， 用 于 给 条 目 添加 一 
个 属性 。 

其 实 【示例 4-6】 这 段 HTML 代码 除去 微 数据 功能 ， 其 代码 大 致 如 下 所 示 。 


【示例 4-7】 HTML 5 之 微 数据 示例 


在 这 段 HTML 代码 中 ， 其 实 就 是 定义 了 两 个 div 元 素 标签 ， 显 示 了 两 段 介绍 人 名 的 句子 。 
而 添加 上 微 数据 功能 后 ， 代 码 就 显得 很 不 一 样 了 ， 表 达 了 想 要 着 重 突出 的 内 容 。 

根据 W3C 官方 给 出 的 介绍 ， 微 数据 引入 了 五 个 全 局 属性 ， 这 些 属性 适用 于 任意 元 素 并 为 数 
据 提供 上 下 文 机 制 。 这 五 个 全 局 属性 的 具体 含义 如 下 : 


@ itemscope: 用 于 创建 一 个 条 目 。itemscope 属性 是 一 个 布尔 值 属性 ， 说 明 页 面 上 有 微 数 
据 以 及 它 从 哪里 开始 ; 

itemtype: 这 个 属性 是 一 个 有 效 的 URL， 用 于 定义 条 目 以 及 为 属性 提供 上 下 文 ; 

itemid: 这 个 属性 是 条 目的 全 局 标识 符 ; 

itemprop: 这 个 属性 是 为 条 目 定义 属性 ; 

itemref: 这 个 属性 提供 了 一 个 附加 元 素 列表 来 抓 取 条 目的 名 值 对 。 


下 面 我 们 看 一 个 定义 微 数 据 词汇 表 的 具体 应 用 。 要 定义 一 个 微 数据 词汇 表 需 要 一 个 有 效 的 
命名 空间 URL， 例 如 网 址 (http:/data-vocabulary.org/Person) 可 以 作为 如 下 命名 属性 的 个 人 微 数 
据 词 汇 表 的 命名 空间 。 


@ name: 人 名 ， 简 单 的 字符 串 值 ; 
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@ ”photo: 指向 人 物 照片 的 URL; 
@ url: 属于 个 人 的 网 站 。 


下 面 是 一 个 使 用 个 人 微 数据 相关 属性 的 例子 。 


当 Google 的 网 页 爬虫 解析 上 面 的 代码 页 面 并 发 现 符合 http://data-vocabulary.org/Person 词汇 
表 的 微 数据 属性 时 ， 会 解析 出 这 些 属性 并 将 其 存储 到 其 他 页 面 数据 的 旁边 。 


4.1.9 Ajax 升级 版 一 一 XMLHttpRequest Level 2 


说 起 大 名 易 易 的 Ajax 技术 ， 我 相信 绝 大 多 数 的 读者 一 定 不 陌生 ， 它 就 是 基于 
XMLHttpRequest 这 个 浏览 器 接口 实现 的 。XMLHttpRequest Level 2 这 个 概念 是 W3C 组 织 在 
HTML 5 规范 形成 后 ， 为 了 弥补 旧版 XMLHttpRequest 接口 的 不 足 之 处 ， 发 布 的 规范 化 的 
XMLHttpRequest Level 2 接口 。XMLHttpRequest Level 2 添加 了 很 多 新 的 功能 特性 ， 使 得 Ajax 技 
术 更 加 成 熟 强大 。 

下 面 我 们 针对 XMLHttpRequest Level 2 接口 的 新 特性 ， 并 结合 Ajax 技术 进行 详细 的 介绍 。 

旧版 本 XMLHttpRequest 接口 的 不 足 之 处 : 

@ 只 支持 文本 数据 的 传送 ， 无 法 用 来 读 取 和 上 传 二 进 制 文件 ; 

@@ ”传送 和 接收 数据 时 ， 没 有 进度 信息 ， 只 能 提示 有 没有 完成 ; 

@ ”只 能 向 同一 域名 的 服务 器 请 求 数据 。 

新 版 本 XMLHttpRequest Level 2 接口 做 出 了 大 幅 改进 : 

可 以 设置 HTTP 请 求 的 时 限 ; 

可 以 使 用 FormData 对 象 管理 表单 数据 ; 
可 以 上 传 文件 ; 

可 以 请 求 不 同 域名 下 的 数据 ( 跨 域 请 求 ) ; 
可 以 获取 服务 器 端的 二 进 制 数据 ; 

可 以 获得 数据 传输 的 进度 信息 。 


. HTTP 请 求 的 时 限 
有 时 ，Ajax 操作 不 但 耗 时 且 无 法 预知 要 花 多 少时 间 ，XMLHttpRequest Level 2 接口 增加 了 


EE 
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timeout 属性 ， 可 以 设置 HTTP 请 求 的 时 限 。 例 如 : 


这 条 语句 将 最 长 等 待 时 间 设 为 3000 毫秒 ， 过 了 这 个 时 限 就 自动 停止 HTTP 请 求 。 与 之 配套 
的 还 有 一 个 timeout 事件 用 来 指定 回调 函数 ， 如 下 所 示 : 


2 . FormData 对 象 


Ajax 操作 往往 用 来 传递 表单 数据 ， 为 了 方便 表单 处 理 ，HTML 5 新 增 了 一 个 FormData 对 
象 ， 可 以 模拟 表单 。 具 体 方法 如 下 : 
首先 ， 新 建 一 个 FormData 对 象 : 


然后 ， 为 它 添加 表单 项 : 


最 后 ， 直 接 传送 这 个 FormData 对 象 提交 网 页 表单 : 


FormData 对 象 还 可 以 用 来 获取 网 页 表单 的 值 : 


3 . 上 传 文件 


新 版 XMLHttpRequest Level 2 接口 不 仅 可 以 发 送 文本 信息 ， 还 可 以 上 传 文件 。 我 们 假定 files 
是 一 个 "选择 文件 "的 表单 元 素 Cinput[type="file"])， 将 它 装 入 FormData 对 象 : 


然后 ， 发 送 这 个 FormData 对 象 : 
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4 . 跨 域 资源 共享 ( CORS ) 


新 版 XMLHttpRequest Level 2 接口 可 以 向 不 同 域名 的 服务 器 发 出 HTTP 请 求 ， 我 们 称 之 为 
“ 跨 域 资源 共享 ” (Cross-origin resource sharing， 简 称 CORS); 使 用 “路 域 资源 共享 ”的 前 提 
是 浏览 器 必须 支持 这 个 功能 ， 而 且 服 务 器 端 必须 同意 这 种 “ 跨 域 ”。 如 果 能 够 满足 上 面 的 条 件 ， 
则 代码 的 写法 与 不 跨 域 的 请 求 完 全 一 样 。 


5 . 接收 二 进 制 数据 
从 服务 器 接收 二 进 制 数据 可 以 使 用 新 增 的 responseType 属性 ， 可 以 将 responseType 设 为 
blob， 表 示 服 务 器 传 回 的 是 二 进 制 对 象 。 


接收 数据 的 时 候 ， 用 浏览 器 自 带 的 Blob 对 象 即 可 。 


注意 ， 是 读 取 xhrresponse， 而 不 是 xhrresponseText。 
还 可 以 将 responseType 设 为 arraybuffer， 把 二 进 制 数据 装 在 一 个 数组 里 。 


接收 数据 的 时 候 ， 需 要 遍历 这 个 数组 。 


5 . 进度 信息 


新 版 XMLHttpRequest Level 2 接口 传送 数据 的 时 候 ， 有 一 个 progress 事件 ， 用 来 返回 进 
度 信息 。 
该 事件 分 成 上 传 和 下 载 两 种 情况 。 下 载 的 progress 事件 属于 XMLHttpRequest 接口 ， 上 传 的 
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progress 事件 属于 XMLHttpRequestupload 接口 。 
需要 先 定义 progress 事件 的 回调 函数 。 


然后 ， 在 回调 函数 里 面 使 用 这 个 事件 的 一 些 属性 。 


上 面 的 代码 中 ，event.total 是 需要 传输 的 总 字 节 ，event.loaded 是 已 经 传输 的 字 节 。 如 果 
event.lengthComputable 不 为 真 ， 则 event.total 等 于 0。 
根据 W3C 组 织 官方 文献 ， 与 progress 事件 相关 的 还 有 其 他 五 个 事件 ， 可 以 分 别 指定 回调 函数 : 


load 事件 : 传输 成 功 完成 ; 

abort 事件 : 传输 被 用 户 取消 ; 

error 事件 : 传输 中 出 现 错误 ; 

loadstart 事件 : 传输 开始 ; 

loadEnd 事件 : 传输 结束 ， 但 是 不 知道 成 功 还 是 失败 。 


4.1.10 HTML 5 Forms 

HTML 5 规范 对 表单 〈Form) 增加 了 很 多 新 特性 ， 与 传统 表单 相 比 变化 还 是 很 大 的 ， 当 然 性 
能 也 更 加 快捷 高 效 了 。 这 一 小 节 我 们 向 读者 介绍 一 下 HTML 5 新 表单 的 新 功能 。 

1. autocomplete 属性 


autocomplete 属性 规定 form 域 或 input 标签 元 素 拥有 自动 完成 功能 ， 当 用 户 在 自动 完成 域 中 
开始 输入 时 ， 浏 览 器 应 该 在 该 域 中 显示 填写 的 选项 ; 


autocomplete 适用 于 form 标签 ， 以 及 使 用 text、search、url、telephone、email、password、 


datepickers、range 和 color 类 型 的 input 标签 。 


下 面 我 们 看 一 个 使 用 自动 完成 功能 的 表单 ， 具 体 代码 如 下 参见 源 代码 chapter04/ch04- 
HTML 5-form-autocomplete.html 文件 ) 所 示 。 


【示例 4-8】 HTML 5 表单 新 特性 之 自动 完成 
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在 这 段 HTML 代码 中 ， 第 25 一 30 行 代码 使 用 form 标签 元 素 定义 了 一 个 表单 域 ， 第 25 行 代 
码 中 为 form 表单 增加 了 自动 完成 功能 (autocomplete="on")， 这 样 第 26 和 27 行 代 码 定义 的 input 
标签 元 素 会 增加 自动 完成 功能 ， 而 第 28 行 代 码 定义 的 email 类 型 的 input 标签 元 素 将 自动 完成 功 
能 注销 了 autocomplete="off')。 

运行 测试 这 个 页 面 ， 将 表单 域 填写 好 并 提交 ; 提交 后 ， 当 我 们 再 次 填写 表单 域 时 ， 会 发 现 浏 
览 器 会 自动 完成 输入 选项 ， 效 果 如 图 4.9 所 示 。 
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专 生 图 Iloalhost6334 |， C QQ 更 


HTML5 表 单 新 特性 之 自动 完成 


First name: lking 
Last name: 咱 


Ematt WEEE 


提交 查 癌 
图 4.9 HTML 5 表单 新 特性 之 自动 完成 


而 email 类 型 input 表单 域 由 于 注销 了 自动 完成 功能 ， 因 此 当 用 户 输入 该 表单 域 时 ， 浏 览 器 
是 不 会 提示 自动 完成 输入 选项 的 。 


2 . autofocus 属性 
autofocus 属性 规定 form 表单 在 加 载 时 自动 获取 焦点 的 域 。 


一 autofocus 属性 适用 于 所 有 类 型 的 input 标签 元 素 。 


下 面 我 们 看 一 个 使 用 自动 焦点 功能 的 表单 ， 具 体 代 码 如 下 (参见 源 代码 chapter04/ch04- 
HTML 5-form-autofocus.html 文件 ) 所 示 。 


【示例 4-9】 HTML 5 表单 新 特性 之 自动 焦点 
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能 (autofocus="autofocus")。 
运行 测试 这 个 页 面 ， 页 面 加 载 后 email 类 型 的 input 标签 元 素 域 自动 获取 了 输入 焦点 ， 效 果 
如 图 4.10 所 示 。 


€ localhost63342/ht 
HTML5 表 单 新 特性 之 自动 焦点 


First name: 


Last name: 
E-mail: | 
提交 查 词 


图 4.10 HTML 5 表单 新 特性 之 自动 焦点 


3 . form 属性 
form 属性 规定 输入 域 所 归属 于 某 一 个 表单 或 多 一 组 表单 。 


form 属性 适用 于 所 有 类 型 的 input 标签 元 素 ; 如 需 引 用 一 组 表单 ， 可 以 使 用 空格 分 隔 


的 列表 。 


下 面 我 们 看 一 个 使 用 form 属性 的 表单 ， 具 体 代 码 如 下 参见 源 代码 chapter04/ch04-HTML 
5-form-form.html 文件 ) 所 示 。 


【示例 4-10】 HTML 5 表单 新 特性 之 form 属性 
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在 这 段 HTML 代码 中 ， 第 31 行 代码 定义 的 text 类 型 的 input 标签 元 素 是 在 form 表单 域外 部 
的 ， 按 照 传统 的 表单 定义 ， 该 表单 域 是 不 归属 于 上 面 form 表单 的 ; 但 我 们 为 第 31 行 的 input 标 
签 元 素 增 加 了 form 属性 〈form="form-login")， 其 中 "form-login" 属 性 值 与 第 25 行 代码 中 为 form 
标签 元 素 定义 的 id 值 对 应 ， 通 过 该 方式 ，HTML 5 规范 自动 将 第 31 行 定义 的 input 标签 元 素 归 
属于 第 25 一 30 行 定义 的 表单 域 。 

运行 测试 这 个 页 面 ， 在 表单 域 输入 内 容 后 提交 ， 测 试 一 下 第 31 行 代码 定义 的 表单 域 自动 完 
成 功能 ， 效 果 如 图 4.11 所 示 。 从 图 中 可 以 看 到 ， 第 31 行 代码 定义 的 表单 域 仍然 具有 自动 完成 功 
能 ， 可 见 该 表单 域 是 归属 于 form 表单 的 。 


First name: 


E-mail: 


im 


图 4.11 HTML 5 表单 新 特性 之 form 属性 


4 . placeholder 属性 
placeholder 属性 提供 一 个 输入 提示 ， 用 于 描述 输入 域 所 期 待 的 值 。 
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| placeholder 属性 适用 于 使 用 text、search、url、telephone、email 和 password 类 型 的 
input 标签 。 


下 面 我 们 看 一 个 使 用 placeholder 属性 的 表单 ， 具 体 代 码 如 下 参见 源 代码 chapter04/ch04- 
HTML 5-form-placeholder.html 文件 ) 所 示 。 


【示例 4-11】 HTML 5 表单 新 特性 之 placeholder 属性 


在 这 段 HTML 代码 中 ， 第 27、29 和 31 行 代码 为 表单 域 增加 了 placeholder 属性 。 
运行 测试 这 个 页 面 ， 效 果 如 图 4.12 所 示 。 从 图 中 可 以 看 到 ， 增 加 了 placeholder 属性 的 表单 
域 中 给 出 了 灰色 字体 的 提示 信息 。 
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First name: |First neme 


Last name: |last name 


E-mail: |emal@domin.com 


提交 查询 
图 4.12 HTML 5 表单 新 特性 之 placeholder 属性 


5 . required 属性 
required 属性 规定 表单 在 提交 之 前 必须 填写 输入 域 (不 能 为 空 )。 


required 属性 适用 于 使 用 text、search、url、telephone、email 、password 、 datepickers 、 


number、checkbox、radio 和 file 类 型 的 input 标签 。 


下 面 我 们 看 一 个 使 用 required 属性 的 表单 ， 具 体 代 码 如 下 参见 源 代码 chapter04/ch04- 
HTML 5-form-required.html 文件 ) 所 示 。 


【示例 4-12】 HTML 5 表单 新 特性 之 required 属性 
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在 这 段 HTML 代码 中 ， 第 27 和 29 行 代 码 为 表单 域 增加 了 required 属性 。 

运行 测试 这 个 页 面 ， 在 不 输入 表单 域 的 前 提 下 点 击 “ 提 交 查 询 ” 按 钮 ， 效 果 如 图 4.13 所 
示 。 从 图 中 可 以 看 到 ， 增 加 了 required 属性 的 表单 域 在 提交 表单 时 ， 如 果 内 容 为 空 ， 浏 览 器 会 提 
示 “ 请 填写 此 字段 ”。 


各 ccalhosté3342/ht 


HTML5 志 单 新 特性 之 required 必 性 


E-mail [Goreme | 


图 4.13 HTML 5 表单 新 特性 之 required 属性 


除了 上 面 几 个 新 特性 外 ，HTML 5 规范 对 表单 Form) 还 增加 了 诸如 novalidate、multiple、 
list、min、max 和 step 等 新 特性 ， 感 兴趣 的 读者 可 以 自行 了 解 一 下 使 用 方法 。 


外 .2 HTML 5 之 Web 储存 


早先 网 页 的 存储 都 是 通过 cookie 和 session 完成 ， 但 HTML 5 提供 了 新 的 存储 方式 ， 本 节 的 
目的 就 是 让 读者 了 解 这 些 新 增加 的 存储 方式 。 


4.2.1 Web 存储 概述 


HTML 5 规范 提供 了 两 种 在 客户 端 存储 数据 的 新 方法 ， 分 别 是 localStorage 方式 和 
sessionStorage 方式 。 这 两 种 方式 的 特点 如 下 : 


@ localStorage: 没有 时 间 限 制 的 数据 存储 ; 
@ sessionStorage: 针对 一 个 session 的 数据 存储 。 
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在 HTML 5 规范 出 台 之 前 ， 传 统 的 HTML 网 页 一 般 都 是 由 cookie 完成 存储 功能 的 。 使 用 过 
cookie 的 读者 一 定 知道 ，cookie 方式 是 不 适合 大 量 数据 存储 操作 的 。 因 为 存储 是 由 每 次 对 服务 器 
发 起 的 请 求 来 传递 完成 的 ， 导 致 cookie 的 速度 很 慢 、 效 率 很 低 ， 无 法 适应 大 量 数据 的 场景 。 

在 HTML 5 规范 中 ， 数 据 不 是 由 每 次 服务 器 请 求 传递 的 ， 而 是 只 有 在 请 求 时 才 使 用 数据 。 
这 样 就 使 得 在 不 影响 网 站 性 能 的 情况 下， 存储 大 量 数 据 成 为 可 能 。 对 于 每 个 单独 的 网 站 ， 数 据 存 
储 于 单独 的 区 域 ， 并 且 每 个 网 站 只 能 访问 其 自身 的 数据 。 

最 后 ，HTML 5 规范 下 使 用 JavaScript 来 存储 和 访问 数据 。 


4.2.2 localStorage 存储 方式 


在 4.2.1 小 节 我 们 提 到 ， 使 用 localStorage 方式 存储 的 数据 没有 时 间 限 制 ， 换 言 之 就 是 无 论 经 
过 多 少 天 〈 可 能 是 一 天 、 一 个 月 或 是 一 年 )， 存 储 的 数据 依然 可 用 。 

下 面 我 们 看 一 段 使 用 localStorage 方式 存储 的 代码 ， 这 段 代码 (参见 源 代码 chapter04/ch04- 
HTML 5-webstorage-localstorage.html 文件 ) 是 一 个 模拟 页 面 访问 次 数 的 应 用 。 


【示例 4-13】 ”Web 存储 之 localStorage 方式 
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在 这 段 HTML 代码 中 ， 使 用 localStorage 存储 方式 模拟 了 页 面 访问 次 数 的 应 用 ， 下 面 我 们 详 
细 介 绍 : 

第 33 一 37 行 的 脚本 代码 使 用 if 条 件 语句 先 判断 localStorage.pagecount 属性 是 否 有 效 ， 如 果 
有 效 则 计数 器 加 1， 如 果 无 效 则 说 明 页 面 是 第 一 次 被 访问 ， 则 计数 器 初始 值 定义 为 1; 

第 38 一 39 行 的 脚本 代码 通过 localStorage.pagecount 属性 值 将 访问 次 数 显 示 在 页 面 第 26 行 代 
码 中 定义 的 id 值 为 "id-visitor-counts" 的 div 标签 元 素 区 域 中 每 一 次 页 面 为 访问 刷新 ， 该 div 标 
签 元 素 中 的 内 容 会 被 更 新 ; 

运行 测试 这 个 页 面 ， 效 果 如 图 4.14 所 示 。 如 图 中 提示 的 那样 ， 即 使 关闭 页 面 或 浏览 器 ， 当 
我 们 再 次 打开 该 页 面 时 ， 计 数 器 会 继续 累计 增加 。 


二 图 loalhost63342/htm 7 C 内 再 客 » 三 


HTML5 - Web 存 储 localStorage 存 储 方 式 


Visits 15 time(s). 


图 4.14 ”Web 存储 之 localStorage 方式 


4.2.3 sessionStorage 存储 方式 


在 第 4.2.1 小 节 中 我 们 提 到 ， 使 用 sessionStorage 方式 存储 是 针对 一 个 session (会 话 ) 进行 数 
据 存储 ， 也 就 是 说 ， 当 用 户 关闭 浏览 器 窗口 后 ， 存 储 数据 也 会 被 自动 删除 。 

下 面 我 们 看 一 段 使 用 sessionStorage 方式 存储 的 代码 ， 这 段 代 码 (参见 源 代码 chapter04/ch04- 
HTML 5-webstorage-sessionStorage.html 文件 ) 同样 是 一 个 模拟 页 面 访问 次 数 的 应 用 。 


【示例 4-14】 ”Web 存储 之 localStorage 方式 
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在 这 段 HTML 代码 中 ， 使 用 sessionStorage 存储 方式 模拟 了 页 面 访问 次 数 的 应 用 ， 下 面 我 们 
详细 介绍 : 

第 33 一 37 行 的 脚本 代码 使 用 让 条 件 语句 先 判断 sessionStorage.pagecount 属性 是 否 有 效 ， 如 
果 有 效 则 计数 器 加 1， 如 果 无 效 则 说 明 页 面 是 第 一 次 被 访问 ， 则 计数 器 初始 值 定义 为 1; 

第 38 一 39 行 的 脚本 代码 通过 sessionStorage.pagecount 属性 值 将 访问 次 数 显示 在 页 面 第 26 行 
代码 中 定义 的 id 值 为 "id-visitor-counts" 的 div 标签 元 素 区 域 中 ， 每 一 次 页 面 为 访问 刷新 ， 则 该 div 
标签 元 素 中 的 内 容 会 被 更 新 。 

运行 测试 这 个 页 面 ， 效 果 如 图 4.15 所 示 。 如 图 中 提示 的 那样 ， 在 关闭 浏览 器 后 再 次 打开 该 
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页 面 时 ， 由 于 session 〈 会 话 ) 会 随 着 浏览 器 关闭 自动 关闭 的 原因 ， 计 数 器 会 被 重 置 清 零 ， 从 1 
开始 重新 计数 ， 读 者 可 以 自行 测试 一 下 。 


区 图 loaost6s34zmtm 7 C 关于 > 三 


HTML5 - Web 存 储 sessionStorage 存 储 方 式 


Visits: 5 time(s) in this session 
说 明 : 
用 户 每 刷新 “次 页 面 计数 器 会 随 之 增长 - 
不 过 当 用 户 关闭 该 浏览 种 后 ,重新 打开 页 面 后 计数 器 会 被 
重 畦 清 零 


图 4.15 Web 存储 之 sessionStorage 方式 


处 .了 HTML 5 之 应 用 缓存 


HTML 5 引入 了 应 用 程序 缓存 的 概念 ， 这 表明 Web 应 用 可 进行 缓存 ， 并 且 在 没有 因特网 连 
接 时 也 可 以 进行 访问 。 应 用 程序 缓存 为 Web 应 用 带 来 三 个 优势 : 


@ 离线 浏览 : 用 户 可 在 应 用 离线 时 使 用 Web 应 用 ; 
@ 高 速 : 已 缓存 资源 加 载 得 更 快 ; 
@ ”减少 服务 器 负载 :浏览 器 将 只 从 服务 器 下 载 更 新 过 或 更 改过 的 资源 。 


那么 如 何 使 用 应 用 缓存 呢 ? 通过 在 HTML 5 网 页 中 创建 cache manifest 文件 ， 就 可 以 轻松 地 
实现 Web 应 用 的 离线 版 本 。 关 于 cache manifest 文件 的 使 用 ， 请 看 下 面 的 代码 : 


上 面 的 第 02 行 代码 通过 在 文档 的 html 标签 元 素 中 包含 manifest 属性 ， 就 可 以 启用 应 用 程序 
缓存 了 。 如 果 页 面 定义 了 manifest， 则 用 户 访问 时 页 面 都 会 被 缓存 ， 反 之 ， 如 果 页 面 没有 定义 
manifest， 则 用 户 访问 时 页 面 不 会 被 缓存 。 


manifest 文件 的 建议 文件 扩展 名 是 ".appcache"; 同时 ，manifest 文件 需要 配置 正确 的 MIME- 
type ("texVcache-manifest") ， pe Web 服务 器 上 进行 配置。 


那么 manifest 文件 具体 是 如 何 定义 的 呢 ? manifest 文件 其 实 是 个 简单 的 文本 文件 ， 其 通知 浏 
览 器 被 缓存 的 内 容 和 不 缓存 的 内 容 。manifest 文件 大 致 可 分 为 如 下 三 个 部 分 : 


@ CACHE MANIFEST: 在 此 条 目下 列 出 的 文件 将 在 首次 下 载 后 进行 缓存 ; 
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@ NETWORK: 在 此 条 目下 列 出 的 文件 需要 与 服务 器 连接 ， 且 不 会 被 缓存 ; 
@ FALLBACK: 在 此 条 目下 列 出 的 文件 规定 当 页 面 无 法 访问 时 的 回 退 页 面 ( 壁 如 著名 的 
404 错误 页 面 ) 。 


下 面 我 们 看 一 段 应 用 缓存 的 代码 ， 这 段 代 码 〈 参 见 源 代 码 chapter04/cache.manifest/ch04- 
HTML 5-cache-manifest.html 文件 ) 是 一 个 使 用 应 用 缓存 进行 离线 浏览 的 应 用 。 


【示例 4-15】 ”应 用 缓存 之 HTML 网 页 


在 这 段 HTML 代码 中 ， 使 用 应 用 缓存 创建 了 一 个 页 面 ， 下 面 我 们 详细 介绍 : 

第 02 行 代码 在 html 标签 元 素 中 使 用 manifest 属性 定义 了 一 个 manifest 文件 
"manifestappcache"， 该 文件 保存 在 Web 应 用 根 目录 下 ; 

第 05 行 代码 定义 了 一 个 CSS 样式 文件 "style.css"， 该 文件 也 保存 在 Web 应 用 根 目录 下 ; 

第 06 行 代 码 定义 了 一 个 JavaScript 脚本 文件 "manifestjs"， 该 文件 同样 也 保存 在 Web 应 用 根 
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目录 下 ; 

第 11 一 31 行 代码 为 页 面 主体 部 分 ， 定 义 了 一 些 页 面 内 容 用 于 测试 应 用 缓存 功能 。 

下 面 我 们 看 一 下 第 05 行 代码 定义 的 CSS 样式 文件 ， 这 段 样式 代码 (参见 源 代码 
chapter04/cache.manifest/style.css 文件 ) 为 页 面 的 nav、div 和 p 标签 元 素 定义 了 样式 。 


【示例 4-16】 应 用 缓存 之 CSS 样式 文件 


接着 我 们 看 一 下 第 06 行 代 码 定义 的 JavaScript 脚本 文件 ,【 示 例 4-17】 这 段 脚 本 代码 (参见 
源 代码 chapter04/cache.manifest/manifestjs 文件 ) 为 更 换 图 片 功能 提供 了 操作 。 


【示例 4-17】 应 用 缓存 之 脚本 文件 


在 这 段 脚 本 代码 中 ， 第 02 行 的 脚本 代码 使 用 JavaScript 数学 函数 生成 了 1 一 3 区 间 内 的 正 整 
数 ， 第 03 行 的 脚本 代码 根据 随机 数 蔡 换 不 同 的 png 格式 图 片 ; 

最 后 ， 我 们 看 一 下 【示例 4-18】 这 段 代码 ， 其 是 本 应 用 的 manifest 文件 ("manifest.appcache")， 
具体 代码 如 下 。 


【示例 4-18】 ”应 用 缓存 之 Manifest 文件 


在 这 段 代 码 中 ，CACHE MANIFEST 条 目下 定义 了 style.css、manifestjs 和 三 个 图 片 文件 的 
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存储 位 置 ， 这 样 就 可 以 保证 网 页 脱 机 浏览 时 也 能 加 载 这 些 文件 了 。 
运行 测试 该 应 用 ， 打 开 ch04-HTML 5-cache-manifest.html 文件 ， 页 面 效 果 如 图 4.16 所 示 。 然 


后 ， 我 们 点 击 页 面 中 的 “更 换 图 片 ”按钮 ， 尝 试 网 页 脚本 语言 功能 的 操作 ， 页 面 效果 如 图 4.17 
所 示 。 


EL 人 - 口 x 
需 HIML5 之 应 用 潍 存 x 宕 HTML5 之 应 用 扫 存 x 【于 
€ 力 |loalhost63342/ht CQ 殖 壹 » 三 € localhost633.: © QQ 夫 夫 » 三 
HTML5 之 应 用 缓存 HTML5 之 应 用 缓存 
医 | EE 
Wy 
请 打开 该 页 面 ， 请 打开 该 页 面 ， 
然后 脱 机 浏览 并 重新 加 载 页 面 然后 虞 机 浏览 并 重新 加 载 页 面 - 
页 面 中 的 脚本 和 图 像 依然 可 用 页 面 中 的 脚本 和 图 像 依然 可 用 . 


图 4.16 应 用 缓存 Web 应 用 (一 ) 图 4.17 应 用 缓存 Web 应 用 (二 ) 


以 上 均 是 以 联机 方式 浏览 网 页 ， 下 面 我 们 尝试 以 脱 机 方式 浏览 网 页 ， 点 击 页 面 中 的 “该 页 
面 ”链接 ， 并 使 用 脱 机 方式 浏览 该 页 面 ， 并 在 此 点 击 “ 更 换 图 片 ”按钮 ， 效 果 如 图 4.18 所 示 。 


= D x | 

WW Mes RR x 嘱 

4 eener © Am > 三 
HTML5 之 应 用 缓存 

mmx 

济 条 开 计生 

然后 名 机 河 区 并 重新 加 吉 而 而 

页 硬 中 的 牧 本 和 加 从 依然 可 用 


图 4.18 ”应 用 缓存 Web 应 用 (三 ) 


可 见 ， 使 用 HTML 5 的 应 用 缓存 功能 ， 在 脱 机 浏览 方式 下 ， 应 用 的 样式 文件 、 脚 本 文件 和 
图 片 资 源 均 可 以 使 用 。 
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4.4 Web 索引 数据 库 : IndexedDB 


Web IndexedDB 也 就 是 Web 索引 数据 库 ， 其 已 经 作为 HTML 5 规范 的 一 部 分 而 实现 了 。 
Web IndexedDB 对 于 创建 的 数据 密集 型 的 本 地 离线 HTML 5 Web 应 用 程序 作用 很 突出 。 另 外 ， 
Web IndexedDB 还 对 移动 Web 应 用 程序 的 本 地 数据 缓存 有 很 大 的 帮助 ， 可 以 使 得 Web 应 用 更 快 
地 响应 和 运行 。 

使 用 IndexedDB 数据 库 的 方法 与 传统 关系 型 数据 库 还 是 有 一 定 区 别 的 ， 其 更 接近 与 NoSQL 
类 型 的 非 关 系 型 数据 库 。 不 过 ， 既 然 是 数据 库 ， 自 然 也 有 创建 、 打 开 、 增 加 、 删 除 和 更 新 等 基本 
功能 的 操作 。 


4.4.1 打开 一 个 IndexedDB 数据 库 
首先 ， 你 需要 知道 你 的 浏览 器 是 否 支持 IndexedDB， 代 码 如 下 所 示 : 


如 果 检 测 到 浏览 器 支持 IndexedDB， 就 可 以 通过 创建 一 个 请 求 打开 IndexedDB 数据 库 。 代 
码 如 下 所 示 : 


其 中 ， 第 一 个 参数 是 数据 库 的 名 称 ， 第 二 个 参数 是 数据 库 版 本 号 。 版 本 号 可 以 在 升级 数据 库 
时 用 来 调整 数据 库 的 结构 和 数据 。 

增加 数据 库 版 本 号 时 ， 会 触发 onupgradeneeded 事件 ， 该 操作 可 能 会 发 生成 功 、 失 败 和 阻止 
事件 三 种 情况 。 代 码 如 下 所 示 : 
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其 中 ，onupgradeneeded 事件 在 第 一 次 打开 页 面 初 始 化 数据 库 时 或 在 版 本 号 变化 时 会 被 调 
用 ， 因 此 应 该 在 onupgradeneeded 函数 方法 里 创建 存储 数据 。 如 果 没有 版 本 号 变化 ， 而 且 页 面 之 
前 被 打开 过 ， 则 将 会 获得 一 个 onsuccess 事件 。 如 果 有 错误 发 生 时 则 会 触发 onerror 事件 。 


4.4.2 向 ObjectStore 里 新 增 对 象 
为 了 往 数据 库 里 新 增 数据 ， 首 先 需要 创建 一 个 事务 ， 并 要 求 具有 读 写 权限 。 代 码 如 下 所 示 : 


4.4.3 ”从 ObjectStore 里 删除 对 象 
删除 跟 新 增 一 样 需 要 创建 事务 ， 然 后 调用 删除 接口 ， 通 过 key 删除 对 象 。 代 码 如 下 所 示 : 


4.4.4 通过 key 取出 对 象 
通过 向 get0 方 法 里 传 入 对 象 的 key 值 ， 来 取出 相应 的 对 象 。 代 码 如 下 所 示 : 
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4.4.5 更 新 一 个 对 象 
更 新 一 个 对 象 的 操作 需要 先 把 对 象 取 出 来 ， 然 后 修改 好 后 青 保存 回去 。 代 码 如 下 所 示 : 


Web IndexedDB 的 功能 非常 强大 ， 除 了 上 面 介绍 的 基本 操作 ， 还 提供 了 很 多 高 级 功能 ， 读 者 
可 以 参阅 W3C 官方 文档 进行 进一步 了 解 。 


和.95 小结 


本 章 主要 介绍 了 HTML 5 提供 的 特色 功能 ， 包 括 HTML 5 新 特性 、Web 存储 、 应 用 缓存 和 
Web IndexedDB 索引 数据 库 等 新 特性 内 容 。 新 特性 部 分 是 普通 HTML 应 用 人 员 从 没有 接触 过 的 
内 容 ， 也 是 HTML 5 的 主要 变化 。 希 望 本 章 内 容 能 给 广大 读者 以 帮助 和 启迪 。 
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CSS 


算 机 语言 ， 在 设计 HTML 文档 时 使 用 
离 。 因 此 ， 基 于 CSS 网 页 样式 的 优势 ， 


第 5 章 
< 定义 CSS 网 页 样式 > 


本 章 我 们 介绍 如 何 定义 CSS 网 页 样式 。CSS 网 页 样式 是 一 种 用 来 表现 HTML 文档 样式 的 计 


CSS 网 页 样式 ， 可 以 将 网 页 的 内 容 与 表现 形式 进行 有 效 分 
目前 使 用 HTML + CSS 方式 设计 网 页 是 最 主流 的 方法 。 


当然 ， 使 用 CSS 网 页 样式 是 需要 设计 人 员 遵 循 一 定 规范 的 ， 在 这 方面 W3C 组 织 发 布 了 有 关 


于 CSS 标准 规范 的 文档 。 同 时 ， 基 于 


CSS Sprites 技术 、 


CSS 的 使 用 还 有 很 多 非常 实用 的 技巧 ， 辟 如 标签 语义 化 、 


CSS Hack 等 。 因 此 ， 前 端 工 程 师 需 要 对 CSS 网 页 样式 有 一 个 全 面 的 了 解 ， 才 
可 以 设计 出 更 好 的 HTML 网 页 。 
本 章 主要 包括 以 下 内 容 : 


什么 是 CSS 

CSS 文件 构成 
标签 语义 化 

CSS 命名 规范 
CSS 样式 重 置 
CSS Sprites 技术 
页 面 质量 评估 标准 
代码 注释 的 重要 性 
CSS Hack 


什么 是 CSs 


什么 是 CSS 呢 ? CSS 的 英文 全 拼 是 Cascading Style Sheets， 一 般 翻 译 成 中 文 叫 作 “ 层 县 样式 
表 ”。CSS 是 一 种 用 来 表现 HTML 或 XML 等 文件 样式 的 计算 机 编程 语言 。 
CSS 从 最 初 发 布 的 CSS 1 版 本 开始 ， 到 CSS 2 版 本 的 完善 ， 再 到 目前 最 新 版 本 的 CSS 3， 这 


期 间 经 历 了 多 次 寻 


EE 大 的 修订 、 扩 展 与 


E 构 ， 是 凝聚 了 众多 开发 者 辛勤 工作 的 成 果 。 


CSS 是 能 够 真正 做 到 网 页 表现 与 内 容 分 离 的 一 种 样式 设计 语言 。 相 对 于 传统 HTML 的 表现 
而 言 ，CSS 能 够 对 网 页 中 元 素 对 象 的 位 置 排版 进行 像素 级 的 精确 控制 ， 支 持 几 乎 所 有 的 字体 字 
号 样式 ， 拥 有 对 网 页 对 象 和 模型 样式 编辑 的 能 力 ， 并 能 够 进行 初步 交互 设计 ， 是 目前 基于 文本 展 
示 最 优秀 的 表现 设计 语言 。 


日. css 样式 表 构 成 


CSS 样式 表 的 使 用 比较 灵活 ， 在 本 书 第 1.3 节 中 ， 我 们 对 CSS 样式 表 的 使 用 有 过 初步 的 介 
绍 。 大 体 上 ，CSS 样式 表 可 以 分 为 内 联 式 、 嵌 入 式 和 外 链 式 这 三 种 。 而 外 链 式 的 CSS 样式 表 ， 
是 通过 引用 一 个 外 部 CSS 文件 来 实现 的 ， 该 方式 也 是 使 用 最 普遍 的 一 种 形式 。 

对 于 编写 一 个 CSS 样式 表 文件 ， 我 们 需要 掌握 一 些 基本 的 语法 规则 ， 下 面 详细 介绍 。 


5.2.1 CSS 样式 表 构 成 
CSS 样式 主要 由 两 部 分 构成 ， 选 择 器 以 及 一 条 或 多 条 的 声明 。 其 语法 格式 如 下 ; 


其 中 ， 选 择 器 〈selector) 通常 是 需要 改变 样式 的 HTML 元 素 ， 而 每 条 声明 〈declaration) 由 
一 个 属性 和 一 个 值 组 成 。 

属性 property) 是 准备 设置 的 样式 属性 〈style attribute)， 每 个 属性 有 一 个 值 ， 属 性 和 值 中 
间 使 用 冒号 分 隔 开 来 。 

下 面 看 一 段 实际 CSS 样式 代码 的 例子 : 


在 上 面 这 段 CSS 样式 代码 中 ，p 是 选择 器 ，margin 〈 外 边 距 )、font-size (字体 大 小 )、color 
(颜色 ) 和 textralign 〈 文 本 对 齐 方式 ) 是 属性 ， 依 次 对 应 的 2px、12px、red 和 center 是 值 。 而 
像 “margin: 2px;” 这 样 一 组 { 属 性 : 值 } 对 就 称 为 一 个 声明 。 


5.2.2 CSS 样式 表 高 级 语法 


CSS 样式 表 支 持 选 择 器 分 组 功能 ， 之 所 以 对 选择 器 进行 分 组 ， 是 因为 被 分 组 的 选择 器 可 以 
共享 相同 的 声明 。 进 行 分 组 时 ， 要 使 用 逗号 将 需要 分 组 的 选择 嚣 分开。 我 们 看 下 面 的 例子 : 
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上 面 这 段 代 码 对 hl、h2、h3、h4、hs 和 h6 这 些 标签 元 素 进行 了 分 组 ， 这 样 全 部 标题 元 素 的 
字体 颜色 都 被 设置 成 红色 。 

另外 ，CSS 样式 表 还 支持 选择 器 继承 功能 。 所 谓 CSS 继承 ， 就 是 子 元 素 将 继承 最 高 级 元 素 
定义 的 全 部 属性 。 我 们 看 下 面 的 例子 : 


根据 上 面 的 代码 ， 所 有 body 的 子 元 素 在 不 需要 另外 定义 的 条 件 下 ， 也 都 具有 显示 红色 “ 黑 
体 ” 字 的 样式 ， 其 作用 域 包括 子 元 素 、 子 元 素 的 子 元 素 等 。 

有 的 时 候 我 们 需要 继承 发 挥 作用 ， 有 的 时 候 我 们 也 希望 子 元 素 具有 特殊 的 样式 ， 那 么 避免 子 
元 素 继承 父 元 素 样式 的 方法 就 是 单独 给 子 元 素 定 义 一 种 样式 。 我 们 看 下 面 的 例子 : 


根据 上 面 的 代码 ， 所 有 p 的 子 元 素 均 不 继承 body 标签 元 素 的 样式 ， 将 显示 绿色 “宋体 ” 字 
的 样式 。 


5.2.3 ”CSS 选择 器 


CSS 选择 器 是 使 用 CSS 样式 表 最 核心 的 部 分 ， 如 果 想 对 HTML 网 页 中 元 素 的 样式 实现 一 对 
一 ， 一 对 多 或 者 多 对 一 的 控制 ， 就 必须 要 用 到 CSS 选择 器 。 
CSS 选择 器 按照 类 别 可 以 分 为 以 下 几 种 : 


@ ”类 选择 器 : 根据 类 名 为 HTML 标签 元 素 定义 的 样式 ; 

id 选择 器 : 根据 标 有 特定 id 值 的 HTML 标签 元 素 指定 样式 ; 
标签 选择 器 : 根据 HTML 标签 元 素 定义 的 样式 ; 
伪 类 选择 器 : 根据 伪 类 名 为 HTML 标签 元 素 定 义 的 样式 ; 
通用 选择 器 : 使 用 * 表 示 的 成 为 通用 选择 器 ; 
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@ ”属性 选择 器 : 根据 标签 元 素 的 属性 来 定义 的 选择 器 ， 其 属性 可 以 是 标准 属性 也 可 以 是 
自 定义 属性 ; 

@ 群 组 选择 器 : 当 若干 表 标签 元 素 样式 属性 一 样 时 ， 可 以 使 用 群 组 选择 器 共同 调用 一 个 
声明 ， 元 素 之 间 用 过 号 分 隔 。 


另外 ， 还 有 一 些 选 择 器 大 多 数 场合 不 太 常用 ， 但 在 某 些 特定 场合 使 用 最 合适 ， 壁 如: 子 选择 


器 、 后 代 选 择 器 、 相 邻 选 择 器 、 伪 元 素 选择 器 和 结构 性 伪 类 选择 器 等 ， 读 者 可 以 参考 CSS 规范 
中 的 内 容 进一步 了 解 。 


与 .本 标签 语义 化 


在 前 面 第 4.1 节 中 我 们 提 到 了 HTML 5 全 新 的 语义 化 特性 ，CSS 规范 紧 跟 HTML 5 的 发 展 ， 
也 提出 了 标签 语义 化 的 特性 。 在 计算 机 语言 里 ,“ 语 义 化 ” 指 的 是 机 器 在 需要 更 少 的 人 为 干预 的 
情况 下 、 能 够 更 好 地 获取 和 研究 分 析 代 码 ， 让 代码 能 够 被 机 器 更 好 地 识别 ， 最 终 使 得 人 机 交互 更 
加 顺畅 。 

CSS 标签 语义 化 是 让 大 家 直观 地 认识 标签 和 属性 的 用 途 和 作用 ， 语 义 化 的 CSS 样式 代码 对 
于 设计 人 员 更 加 友好 ， 良 好 的 结构 和 直观 的 语义 为 代码 的 维护 省 下 不 少时 间 与 精力 。 同 时 ， 语 义 
化 技术 有 助 于 利用 基于 开放 标准 的 技术 ， 从 数据 、 文 档 内 容 或 应 用 代码 中 分 离 出 实际 意义 。 

下 面 我 们 看 这 段 代码 ， 介 绍 CSS 标签 语义 化 的 写法 。 


【示例 5-1】 CSS 标签 语义 化 
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在 这 段 CSS 样式 代码 中 ， 定 义 了 一 个 完整 的 页 面 CSS 样式 结构 ， 下 面 我 们 详细 介绍 : 
第 02 一 04 行 代码 定义 了 一 个 id 选择 器 (#container)， 相 当 于 整个 HTML 页 面 的 容器 ; 
第 06 一 08 行 代码 定义 了 一 个 id 选择 器 (#header)， 第 09 一 11 行 代码 定义 了 一 个 id 选择 器 
(javbar)， 相 当 于 整个 HTML 页 面 的 项 部 ;语义 化 的 id 选择 器 #header 相当 于 头 部 、#mavbar 
相当 于 导航 条 ; 
第 13 一 15 行 代码 定义 了 一 个 id 选择 器 (#menu)， 第 16 一 18 行 代码 定义 了 一 个 id 选择 器 
(#main)， 第 19 一 21 行 代码 定义 了 一 个 id 选择 器 (#sidebar)， 相 当 于 整个 HTML 页 面 的 主体 ; 
语义 化 的 id 选择 器 #menu 相当 于 菜单 、#main 相当 于 页 面 主体 、#eidebar 相当 于 页 面 侧 边 条 ; 
第 23 一 25 行 代码 定义 了 一 个 id 选择 器 (#footer)， 语 义 化 的 id 选择 器 #footer 相当 于 页 
面 底部 ; 
经 过 以 上 CSS 代码 的 定义 ， 就 将 整个 HTML 页 面 划 分 为 不 同 的 区 域 ， 设 计 人 员 可 以 根据 不 
同 的 区 域 设计 不 同 的 样式 风格 。 


局. 和 css 命名 规范 


前 一 小 节 我 们 介绍 了 CSS 标签 语义 化 ， 这 一 小 节 我 们 引申 一 下 ， 讲 一 讲 CSS 命名 规范 。 既 
然 是 规范 ， 就 是 绝 大 多 数 设计 人 员 都 承认 并 建议 统一 执行 的 标准 。 这 样 做 的 好 处 不 言 而 喻 ， 有 利 
于 形成 整体 风格 统一 的 编码 习惯 ， 这 样 代码 更 易于 维护 和 扩展 。 下 面 我 们 具体 介绍 。 


1 . CSS 文件 名 称 的 命名 规范 


在 创建 CSS 样式 表 文 件 时， 我们 一 般 会 按照 样式 表 的 含义 分 类 编写 CSS 文件 ， 并 统一 保存 
于 项 目 目录 下 css 文件 夹 中 。 例 如 : 项 目 中 全 部 页 面 都 需要 包含 的 样式 表 一 般 命名 为 main.css; 
全 部 关于 文字 的 样式 文件 一 般 命 名 为 font.css; 风格 主题 相关 的 样式 文件 一 般 命 名 为 themes.css; 
关于 按钮 控件 的 样式 文件 一 般 命 名 为 button.css; 关于 表单 的 样式 文件 一 般 命 名 为 form.css; 关于 
表格 的 样式 文件 一 般 命名 为 table.css; 等 等 。 这 样 CSS 文件 的 名 称 与 其 样式 的 内 容 能 一 一 对 应 起 
来 ,十 分 有 利于 CSS 文件 的 管理 。 
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2 . 页 面 功能 区 域 的 命名 规范 


一 般 设 计 人 员 会 将 页 面 划分 为 不 同 的 功能 区 域 ， 这 样 页 面 会 易于 管理 ， 功 能 划分 也 十 分 清 
晰 ， 关 键 是 还 非常 美观 。 因 此 ， 在 命名 CSS 样式 时 就 会 根据 功能 区 域 来 进行 ， 例 如 : header 可 
以 表示 页 面 头 部 ; container 可 以 用 来 表示 页 面 整个 容器 ;main 可 以 用 来 表示 页 面 主体 ; nav 可 以 
用 来 表示 导航 ; sidebar 可 以 用 来 表示 侧 栏 ，menu 可 以 用 来 表示 菜单 ;而 footer 最 常用 来 表示 页 
面 底部 。 


3 . 页 面 位 置 的 命名 规范 

很 多 时 候 设计 人 员 需 要 根据 页 面 位 置 来 划分 CSS 样式 ， 其 中 top、left、bottom、right 和 
center 就 是 最 常用 的 五 种 位 置 。 如 果 我 们 打算 命名 导航 菜单 ， 那 么 topmenu 就 可 以 定义 为 顶部 菜 
单 ，leftmenu 就 可 以 定义 为 左 侧 菜 单 ，rightmenu 就 可 以 定义 为 右 侧 菜单 。 

4 . 父子 关系 的 命名 规范 

父子 关系 比较 好 理解 ， 比 如 父 一 级 菜单 可 以 命名 为 menu， 那 么 子 一 级 菜单 就 可 以 命名 为 


Submenu。 


5 . 具体 功能 的 命名 规范 

很 多 小 的 页 面 元 素 ， 可 以 根据 其 具体 功能 来 命名 CSS 样式 。 比 如 : logo 可 以 表示 网 页 标 
志 ，search 可 以 表示 搜索 ，banner 可 以 表示 广告 区 域 ，title 可 以 表示 标题 ，status 可 以 表示 状 
态 ，scroll 可 以 表示 滚动 ，tab 可 以 表示 标签 页 ，news 可 以 表示 新 闻 ，note 可 以 表示 注释 ，hot 可 
以 表示 热点 ，download 可 以 表示 下 载 ， 等 等 。 

6 . 控件 的 命名 规范 

在 一 个 包含 表单 的 页 面 中 ， 各 种 控件 是 必 不 可 少 的 ， 一 般 可 以 根据 控件 的 类 型 来 命名 CSS 
样式 。 比 如 : form 或 frm 表示 表单 ，btn 或 button 表示 按钮 ，radio 表示 单 选 按钮 ，check 表示 复 
选 按钮 ，listbox 表示 下 来 菜单 ，combobox 表示 组 合 框 ， 等 等 。 

具体 到 每 一 个 项 目 ， 都 可 以 根据 上 面 的 命名 规范 来 定义 ， 当 然 也 可 以 根据 项 目的 独特 性 进行 
本 项 目 特有 风格 的 定义 ， 这 一 点 是 不 做 硬性 规定 的 ， 但 一 个 基本 原则 是 命名 要 通俗 、 易 懂 ， 便 于 
管理 维护 。 


局 .5 css 样式 重 置 


本 节 介绍 CSS 样式 重 置 ， 所 谓 样式 重 团 ， 就 是 将 网 页 的 CSS 重新 设置 成 默认 样式 。 由 于 各 
个 浏览 器 对 HTML 标签 元 素 设置 的 默认 样式 不 尽 相 同 ， 因 此 设计 人 员 就 想到 编写 一 个 统一 的 
HTML 标签 元 素 的 默认 样式 ， 使 得 各 个 浏览 器 的 显示 效果 尽量 统一 。 
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使 用 CSS 样式 重 置 ， 可 以 为 设计 人 员 带 来 很 多 便利 ， 下 面 简 单 总 结 其 几 个 优势 : 


@ ”可 以 将 各 个 浏览 器 的 兼容 性 问题 降 到 最 小 ; 

@ ”可 以 提供 完全 空白 的 页 面 ， 这 样 就 可 以 进行 自 定义 样式 了 ; 

@ ”提供 更 合理 的 基础 样式 框架 ， 后 续 开发 则 更 具有 逻辑 性 (设计 人 员 只 需 添 加 样式 ， 而 
不 用 移 除 或 修改 样式 ) 。 


不 过 ， 使 用 CSS 样式 重 置 也 不 是 万 能 的 ， 在 某 些 特殊 场景 下 ，CSS 重 置 样式 代码 会 带 来 一 
些 不 必要 的 困扰 。 辟 如 : CSS 重 置 代码 中 的 内 外 边 距 (margin 和 padding) 通常 为 0， 但 这 往往 
不 是 我 们 想 要 的 ， 所 以 每 次 使 用 时 需要 对 其 进行 修改 ， 等 等 。 所 以 ， 设 计 人 员 对 CSS 样式 重 置 
的 态度 往往 因 人 而 异 ， 这 也 是 可 以 理解 的 。 但 是 笔者 认为 ， 仅 仅 考虑 到 各 个 浏览 器 的 兼容 性 与 规 
范 性 ， 使 用 CSS 样式 重 置 功能 也 是 值得 推荐 的 。 

目前 ， 比 较 流行 的 CSS 样式 重 置 代码 有 Eric Mayer 的 CSS Reset、Yahoo 的 YUI Reset， 等 
等 。 另 外 ， 很 多 前 段 框架 内 置 的 Themes 也 都 是 使 用 的 CSS 样式 重 置 代码 。 下 面 ， 我 们 就 列举 
Eric Mayer 的 CSS Reset 来 介绍 一 下 。 这 段 代 码 〈 参 见 源 代 码 chapter05/ch05-css-reset.css 文件 ) 
就 是 Eric Mayer 的 CSS Reset。 


【示例 5-2】 ”Eric Mayer 的 CSS Reset 源码 
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在 这 段 Eric Mayer 版 本 的 CSS Reset 样式 代码 中 ， 定 义 了 一 个 基本 HTML 标签 元 素 的 样 
式 ， 下 面 我 们 详细 介绍 : 

第 01 行 代码 的 注释 文本 中 ， 描 述 了 该 源 文件 的 原始 链接 地 址 ;第 02 行 代码 的 注释 文本 中 ， 
给 出 了 版 本 号 和 发 布 日 期 ;目前 ，v2.0 版 是 Eric Mayer 的 CSS Reset 的 最 新 版 ; 

从 第 06 行 开 始 ， 一 直到 第 18 行 结束 ， 列 举 了 一 长 串 HTML 标签 ， 均 定义 了 相同 的 CSS 样 
式 ; 第 19 一 24 行 代码 为 具体 定义 的 样式 代码 ， 包 括 内 外 边 距 、 边 框 、 字 体 和 排列 方式 ; 

第 27~30 行 代码 定义 了 与 文章 类 相关 的 HTML 5 标签 元 素 的 重 置 样式 代码 ， 具 体 见 第 29 
行 代码 定义 的 display:block 〈 将 元 素 显示 为 块 级 元 素 ， 前 后 均 带 换行 符 ); 

第 31 一 33 行 代码 定义 了 body 标签 元 素 的 重 置 样式 代码 ， 具 体 见 第 32 行 代码 定义 的 line- 
height:1 〈 设 置 行 间距 为 一 倍 当前 字体 的 大 小 ); 

第 34 一 36 行 代码 定义 了 ol 与 ul 标签 元 素 的 重 置 样式 代码 ， 具 体 见 第 35 行 代码 定义 的 list- 
style:none( 设 置 ol 与 ul 列表 标签 为 无 标记 样式 ); 
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第 38 一 40 行 代码 定义 了 blockquote 与 q 标签 元 素 的 重 置 样 式 代码 ， 具 体 见 第 39 行 代码 定义 
的 quotes:none (设置 长 标记 与 短 标记 标签 不 产生 任何 引号 ); 

第 41 一 45 行 代码 定义 了 blockquote 与 q 标签 元 素 使 用 before 和 after 伪 元 素 的 重 置 样式 
代码 ; 

第 47 一 50 行 代码 定义 了 table 标签 元 素 的 重 置 样式 代码 ， 具 体 见 第 48 一 49 行 代码 的 定义 ， 
包括 边框 合并 为 单线 框 和 无 边框 间距 样式 。 


与 .6 css sprites 技 术 


CSS Sprites 技术 (很 多 人 称 其 为 CSS 精灵 技术 ) 是 一 种 网 页 图 片 应 用 处 理 方式 。 具 体 来 
讲 ， 就 是 将 一 个 页 面 涉 及 的 所 有 零星 图 片 都 集成 到 一 张 图 片 当中 ， 这 样 当 申请 该 页 面 时 ， 图 片 加 
载 就 不 会 一 个 一 个 慢 慢 依次 显示 出 来 了 。 对 于 当今 以 网 络 性 能 论 成 败 的 用 户 体验 来 说 ， 网 页 加 载 
速度 就 是 一 个 跨 不 过 去 的 硬性 指标 了 。 好 在 对 于 现今 的 互联 网 硬件 来 讲 ， 一 般 200KB 以 内 的 单 
张 图 片 (无论 体 积 大 小 ) 所 需 的 载 入 时 间 基 本 是 相差 不 大 的 ， 因 此 无 须 担心 早期 网 络 中 图 片 过 大 
而 加 载 变 慢 的 问题 。 

那么 ，CSS Sprites 技术 是 基于 什么 原理 设计 的 呢 ? 我 们 都 知道 ， 决 定 网 络 速度 快慢 的 一 项 
指标 就 是 HTTP 请 求 次 数 。 大 多 数 情 况 下 ， 同 样 的 一 项 操作 ， 请 求 一 次 完成 的 时 间 当 然 比 请 求 
多 次 完成 的 时 间 要 少 ， 时 间 少 自然 速度 就 快 、 性 能 就 高 。CSS Sprites 技术 其 实 就 是 把 网 页 中 一 
些 背景 图 片 集成 到 一 个 图 片 文件 中 ， 再 利用 CSS 的 “background-image”、“background- repeat” 
和 “background-position” 这 些 属 性 的 组 合 对 背景 进行 定位 ， 这 样 通过 一 次 请 求 加 载 图 片 来 实现 
提高 网 页 加 载 速度 的 目的 。 

本 节 介绍 使 用 HTML 5 表单 的 datalist 类 型 标签 元 素 实现 自动 提示 的 功能 。 在 HTML 5 规范 
标准 中 ，datalist 类 型 标签 元 素 用 于 定义 选项 列表 ， 并 与 input 标签 元 素 配合 来 使 用 。 实 际 应 用 
中 ，datalist 中 的 选项 不 会 被 显示 出 来 ， 其 仅仅 是 提供 合法 的 输入 值 列 表 。 

下 面 ， 我 们 列举 jQuery UI 中 使 用 的 CSS Sprites 技术 来 介绍 一 下 。 这 段 代码 〈 参 见 源 代码 
chapter05/css-sprites/index.html 文件 ) 就 是 使 用 CSS Sprites 技术 实现 图 标 加 载 的 。 


【示例 5-3】 CSS Sprites 技术 (HTML 代码 ) 
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在 这 段 HTML 代码 中 ， 通 过 ul-li 标签 元 素 定义 了 一 组 图 标 ， 下 面 我 们 详细 介绍 : 

第 16 一 77 行 代码 通过 ul-li 标签 元 素 定义 了 一 组 列表 ; 在 每 组 li 标签 元 素 中 ， 通 过 span 标签 
元 素 定义 了 一 个 图 标 ; 细心 的 读者 一 定 有 注意 到 ， 在 每 一 个 span 标签 元 素 中 ，class 属性 定义 的 
属性 值 均 不 同 ， 这 就 是 本 例 中 使 用 CSS Sprites 技术 的 关键 之 处 ， 这 些 class 属性 值 的 定义 引 自 本 
例 第 06 行 代码 中 定义 的 样式 文件 (css-sprites.css)。 

关于 css-sprites.css 的 定义 可 见 如 下 这 段 CSS 代码 (参见 源 代码 chapter05/css-sprites/css- 
sprites.css 文件 )。 


【示例 5-4】 CSS Sprites 技术 (CSS 代码 ) 


【 第 5 章 定义 CSS 网 页 样式 


在 这 段 CSS 代码 中 ， 通 过 background-image 和 background-position 属性 来 对 图 标 进行 定位 ， 
下 面 我 们 详细 介绍 : 

第 02 一 05 行 代码 定义 了 一 个 CSS 样式 类 (.ui-icon)， 其 中 宽度 和 高 度 值 ( 均 为 16px) 为 图 
标的 尺寸 ; 

第 08 行 样式 代码 通过 background-image 属性 引用 了 一 幅 图 片 ("images/ui-icons_444444_ 
256x240.png" )， 该 图 片 就 相当 于 我 们 前 面 提 到 的 集成 图 片 ， 具 体 如 图 5.1 所 示 。 

第 11~31 行 代码 通过 background-position 属性 定义 了 一 组 CSS 样式 ， 我 们 看 到 其 每 组 属性 
值 均 为 不 同 的 坐标 值 ， 这 相当 于 对 每 一 个 图 标 进行 X、Y 轴 的 定位 ， 而 用 于 定位 的 坐标 系 的 零点 
位 于 图 片 ("images/ui-icons_444444 256x240.png") 的 左上 角 。 

下 面 我 们 运行 测试 这 个 页 面 ， 效 果 如 图 5.2 所 示 。 从 图 中 可 以 看 到 ， 经 过 CSS Sprites 技术 
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的 操作 ， 我 们 成 功 将 图 标 从 一 幅 集成 的 大 图 中 提取 出 来 了 。 
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起 各 17Tweoo01 训 至 
中 国标 集合 

有 号 二 口 吧 2 加 加 ye 


四 日 硬 国 本 图 
1 一目 一刀 


图 5.1 CSS Sprites 技术 的 集成 图 片 图 52 CSS Sprites 技术 效果 图 


下 面 ， 我 们 简单 总 结 CSS Sprites 技术 的 特点 。 

使 用 CSS Sprites 技术 有 很 多 优势 : 能 够 减少 网 页 的 HTTP 请 求 ， 从 而 提高 页 面 的 性 能 ， 能 
够 减少 图 片 的 字 节 ， 集 成 图 片 的 大 小 总 是 小 于 分 开 的 图 片 的 大 小 ; 易于 风格 样式 ， 只 需要 替换 集 
成 图 片 的 颜色 或 样式 ， 就 可 以 达到 改变 整个 网 页 风格 的 效果 ， 维 护 起 来 也 更 方便 。 

当然 ，CSS Sprites 技术 也 不 是 没有 劣势 : 首先 ， 设 计 集成 图 片 的 门槛 就 比较 高 ， 需 要 很 强 
的 美术 功底 〈 本 小 节 的 例子 是 借用 jQuery UI 的 素材 )， 其 次 ， 定 位 工作 也 很 烦琐 ， 需 要 很 细致 
地 对 待 ， 否 则 会 发 生 错误 ; 最 后 ， 修 改 集成 图 片 很 容易 产生 问题 ， 因 为 涉及 CSS 样式 的 改变 ， 
所 以 必须 细心 。 


$ 
" 
韦 
+ 


| 目前 有 些 设计 人 员 开 发 出 了 自动 实现 CSS Sprites 技术 的 根据 ， 感 兴趣 的 读者 可 以 借助 网 络 
| 资源 学 习 了 解 。 


与 . 7 页 面 质量 评估 标准 


HTML 页 面 质量 评估 是 一 个 含义 很 广 的 概念 ， 从 不 同 的 角度 去 考量 ， 会 有 不 同 的 评估 标准 
或 者 说 评价 体系 。 目 前 ， 比 较 公认 的 一 个 评价 角度 ， 就 是 从 搜索 引擎 的 方面 来 评估 一 个 HTML 
页 面 的 质量 。 

搜索 引擎 的 作用 就 是 给 用 户 提供 最 想 要 的 、 质 量 最 高 的 、 最 能 满足 用 户 需求 的 页 面 。 因 此 ， 
搜索 引擎 会 有 一 个 页 面 质量 的 评估 标准 ， 搜 索引 擎 会 根据 这 个 标准 给 页 面 评级 或 评分 。 这 样 ， 当 
用 户 在 进行 检索 查询 时 ， 搜 索引 擎 会 给 用 户 提供 一 个 按照 评级 或 评分 给 出 的 页 面 列表 。 所 以 ， 我 
们 在 设计 页 面 时 ， 要 尽量 契合 搜索 引擎 的 评估 标准 ， 这 样 做 出 来 的 高 质量 的 页 面 既 能 满足 用 户 需 
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要 ， 又 能 实现 自身 的 最 大 价值 。 
下 面 ， 我 们 列举 出 一 些 公认 的 、 对 评估 页 面 质量 有 帮助 的 要 求 ， 让 读者 对 HTML 页 面 质量 
评估 有 一 个 基本 的 了 解 : 


日 ”相关 性 
相关 性 就 是 指 页 面 的 关键 词 与 其 具体 内 容 要 有 直接 关系 ， 如 果 页 面 的 关键 词 与 页 面 实际 内 容 关 
系 不 大 ， 甚 至 不 相关 ， 那 用 户 根本 就 得 不 到 想 要 的 内 容 ， 那 这 样 的 页 面 基本 就 可 以 打 零 分 了。 
十 富 度 
页 面 中 的 具体 内 容 不 但 要 明确 ， 还 要 详尽 丰富 ， 这 样 才能 给 用 户 最 大 程度 的 满足 ， 获 得 最 
大 程度 的 知识 。 
@ 时效 性 
互联 网 最 讲究 的 就 是 时 效 性 ， 最 完美 的 就 是 事件 实时 同步 。 试 想 一 下 ， 世 界 上 某 个 角落 网 


刚 发 生 一 件 震 惊 世 界 的 事件 ， 全 世界 网 民 就 能 获得 最 新 消息 ， 这 就 是 时 效 性 的 最 好 体现 。 因 此 ， 
如 果 页 面 能 够 实现 最 好 的 时 效 性 ， 搜 索引 擎 对 其 评分 一 定 很 高 。 


@ ”有效 性 


页 面 的 内 容 要 真实 有 效 ， 经 得 起 用 户 体验 ， 如 果 页 面 内 容 是 无 效 的 ， 甚 至 是 错误 的 ， 那 即 
使 时 效 性 做 得 再 好 ， 也 没有 意义 。 

@ 需求 度 

一 个 评估 水 平 高 的 页 面 ， 往 往 会 给 需求 度 高 的 内 容 增加 权重 。 辟 如 ， 放 在 页 面 醒目 的 位 
置 ， 增 加 重点 突出 功能 ， 一 切 都 是 为 了 服务 于 用 户 ， 使 用 户 得 到 更 好 的 体验 。 

@ 权威 度 

页 面 中 的 内 容 要 尽量 提供 官方 网 站 、 教 科 书 或 相关 标准 中 的 解释 ， 这 样 的 内 容 可 信 度 高 ， 也 
会 得 到 用 户 的 支持 与 信任 。 

目前 ， 搜 索引 擎 市 场 还 是 几 家 独 大 的 局 面 (如 Google、 百 度 等 )， 所 以 设计 人 员 要 尽量 研究 
这 些 搜索 引擎 给 出 的 页 面 质量 评估 标准 ， 让 自己 的 页 面 尽量 契合 其 中 的 要 求 。 
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5.8 css Hack 


5.8.1 什么 是 CSS Hack 


由 于 目前 市 面 上 不 同 IT 厂商 对 浏览 器 的 实现 方法 不 同 ， 因 此 其 对 CSS 的 支持 与 解析 也 不 完 
全 相同 ， 最 终 导 致 页 面 的 展现 效果 也 会 不 一 样 。 设 计 人 员 需 要 给 用 户 提供 统一 的 页 面 效 果 ， 所 以 
就 要 针对 不 同 的 浏览 器 版 本 编写 特定 的 CSS 样式 。 一 般 我 们 把 这 个 针对 不 同 的 浏览 器 版 本 编写 
相应 的 CSS 样式 代码 的 过 程 称 为 CSS Hack。 


5.8.2 CSS Hack 原理 


CSS Hack 的 原理 用 一 句 话 概括 就 是 ， 根 据 不 同 的 浏览 器 对 CSS 的 不 同 支持 与 解析 ， 并 结合 
CSS 中 的 优先 级 关系 ， 来 编写 针对 不 同 浏览 器 的 CSS 样式 代码 。 

CSS Hack 大 致 有 3 种 表现 形式 : CSS 类 内 部 Hack、 选 择 器 Hack 以 及 HTML 头 部 引用 
Hack。 下 面具 体 介绍 : 


@ CSS Hack 类 内 部 Hack: 比如 Internet Explorer 系列 浏览 器 能 识别 下 划 线 " "或 者 里 号 "*" 
(根据 IE 版 本 会 略 有 不 同 ) ， 而 FireFox 浏览 器 两 种 符号 都 不 能 识别 ; 

@ ”选择 器 Hack: 比如 IE6 能 识别 *html 和 .class{}，IE7 能 识别 *+html、.class{} 或 者 *:first- 
child+html.class{); 

@ HTML 头 部 引用 (if IE)Hack: 针对 所 有 IE6+ 版 本 ， 可 以 使 用 <!--[if IE]><!-- 您 的 代码 -- 
><![endif]-->， 这 类 Hack 不 仅 对 CSS 生效 ， 对 写 在 判断 语句 里 面 的 所 有 代码 都 
会 生效 。 


这 里 代码 的 书写 顺序 有 一 个 技巧 ， 一 般 是 将 识别 能 力 强 的 浏览 器 的 CSS 代码 写 在 后 面 。 


5.8.3 CSS Hack 实例 


1 . 针对 IE 系列 浏览 器 
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2 . 特殊 字符 区 分 IE 和 非 IE 浏览 器 


IE 浏览 器 支持 大 部 分 特殊 字符 ， 其 他 主流 浏览 器 FireFox、Chrome、Opera ( 部 分 支 
持 ) 、Safari 不 支持 ; 

9”: 所 有 正 浏 览 器 都 支持 ; 

“” 和“”; 仅 IE6 支 持 ; 

“> : JE6、JE7 支持 ; 

“0”: IE8、IE9 支持 ，opera 部 分 支持 ; 

A9\0”:; IE8 部 分 支持 、IE9 支持 ; 

A09”:; IE8、IE9 支持 。 


3 . FireFox 浏览 器 特殊 属性 


4 . Safari ( Chrome ) 浏览 器 特殊 属性 


5 . Webkit 和 Opera 浏览 器 
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6 . 依次 区 分 IE 各 个 版 本 浏览 器 


7 . 全 兼容 CSS Hack 
下 面 的 这 段 代码 参见 源 代码 chapter05/ch05-css-hack.html 文件 ) 是 一 个 全 兼容 CSS Hack。 
【示例 5-5】 CSS Hack (HTML 代码 ) 
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【 第 5 章 定义 CSS 网 页 样式 


在 这 段 HTML 代码 中 ， 使 用 CSS Hack 技术 实现 了 对 不 同 版 本 浏览 器 的 支持 ， 下 面 我 们 详 
细 介 绍 : 

第 07 一 11 行 代码 定义 了 一 个 CSS 样式 类 .div-color)， 其 高 度 值 为 64px; 其 中 ， 第 09 行 代 
码 定义 了 识别 全 部 浏览 器 的 背景 颜色 (background-color:#fff); 第 10 行 代码 通过 “\9” 字 符 定义 
了 识别 下 6、IE7、IE8 版 本 浏览 器 的 背景 颜色 (background-color:gray\9); 

第 12 一 16 行 代码 定义 了 针对 IE10+ 版 本 浏览 器 下 识别 CSS 样式 类 〈.div-color) 的 背景 颜色 

《background-color:#blue); 注意 第 12 行 与 第 13 行 代码 的 写法 ， 是 专门 用 于 识别 IE10+ 版 本 浏览 
器 的 CSS Hack; 

第 17 一 21 行 代码 定义 了 针对 使 用 WebKit 内 核 的 Chrome/Opera/Safari 等 浏览 器 下 识别 CSS 
样式 类 〈.div-color) 的 背景 颜色 (background-color:yellow); 注意 第 17 行 代码 的 写法 ， 是 专门 用 
于 识别 WebKit 内 核 浏览 器 的 CSS Hack; 

第 25 一 29 行 代码 定义 了 针对 FireFox 浏览 器 下 识别 CSS 样式 类 (〈.div-color) 的 背景 颜色 

(background-color:green); 注意 第 25 行 代码 的 写法 ， 是 专门 用 于 识别 FireFox 浏览 器 的 CSS 
Hack: 
以 上 这 些 使 用 CSS Hack 定义 的 样式 类 (.div-color) 应 用 于 第 113 一 126 行 代码 定义 的 div 标 
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签 元 素 ， 其 目的 是 针对 不 同 的 浏览 器 在 页 面 中 显示 出 不 同 的 识别 颜色 ; 

然后 ， 第 63 一 65 行 代码 定义 的 id 值 为 “#iieTip” 的 CSS 样式 。 第 71 一 73 行 代码 定义 的 id 
值 为 “#firefoxTip” 的 CSS 样式 ， 第 83 一 85 行 代码 定义 的 id 值 为 “#webkitTip” 的 CSS 样式 ， 
均 使 用 了 “display:none” 的 CSS 样式 ; 这 样 定义 的 目的 是 将 第 114 一 122 行 代 码 定义 的 全 部 span 
标签 元 素 CSS 样式 的 初始 状态 设 定 为 不 显示 ; 

而 第 66 一 70 行 代码 、 第 78 一 82 行 代码 、 和 第 86 一 90 行 代码 同样 使 用 CSS Hack 针对 不 同 
的 浏览 器 将 “display:none ”的 CSS 样式 改变 为 “display:block” 的 CSS 样式 ; 这样， 当 我 们 使 用 
不 同 版 本 的 浏览 器 打开 【示例 5-4】 定 义 的 页 面 时 ， 就 会 显示 针对 该 版 本 浏览 器 的 识别 颜色 。 

下 面 我 们 使 用 FireFox 浏览 器 运行 测试 这 个 页 面 ， 效 果 如 图 5.3 所 示 。 从 图 中 可 以 看 到 ， 经 
过 CSS Hack 技术 的 操作 ， 可 以 成 功 识别 出 运行 该 HTML 页 面 的 为 FireFox 浏览 器 。 

下 面 我 们 再 使 用 IE 浏览 器 运行 测试 这 个 页 面 ， 效 果 如 图 5.4 所 示 。 从 图 中 可 以 看 到 ， 经 过 
CSS Hack 技术 的 操作 ， 可 以 成 功 识 别 出 运 行 该 HTML 页 面 的 为 mternet Explorer 11 浏览 器 。 
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图 5.3 CSS Hack 效果 图 (FireFox 浏览 器 ) 图 5.4 CSS Hack 效果 图 (IE 浏览 器 ) 


下 面 我 们 再 使 用 Opera 浏览 器 运行 测试 这 个 页 面 ， 效 果 如 图 5.5 所 示 。 从 图 中 可 以 看 到 ， 经 
过 CSS Hack 技术 的 操作 ， 可 以 成 功 识别 出 运行 该 HTML 页 面 的 为 Opera 浏览 器 。 这 里 读者 需要 
注意 ， 早 期 的 Opera 浏览 器 使 用 的 不 是 WebKit 内 核 ， 而 是 独立 的 Presto 内 核 ， 在 Opera 13 版 本 
以 后 浏览 器 迁移 到 WebKit 内 核 上 ， 而 本 文中 使 用 的 是 Opera 34 版 本 浏览 器 。 

另外 ， 读 者 可 以 自行 测试 同样 是 基于 WebKit 内 核 开发 的 Chrome 浏览 器 和 Safari 浏览 器 ， 
页 面 效 果 与 图 5.5 是 否 一 样 。 

最 后 ， 我 们 测试 在 Windows 10 内 置 的 Windows Edge 浏览 器 中 的 效果 ， 如 图 5.6 所 示 。 从 图 
中 可 以 看 到 ， 浏 览 器 识别 为 WebKit 内 核 ， 可 见 Windows Edge 浏览 器 确实 像 Microsoft 宣传 的 那 
样 ， 是 全 面 兼容 WebKit 内 核 开 发 的 。 
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WebKit(Chrome/Opera/Safari) 的 济 别 色 是 黄色 (Webkit 内 榨 ) 


图 5.5 CSS Hack 效 果 图 (Opera 浏览 器 ) 
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本 章 主要 介绍 了 定义 CSS 网 页 样式 ， 包 括 CSS 概念 、CSS 样式 表 构 成 、 标 签 语义 化 、CSS 


命名 规范 、CSS 样式 重 置 、CSS Sprites、 页 面 质量 评估 和 CSS Hack 的 相关 内 容 ， 希 望 这 些 CSS 
的 内 容 能 给 广大 读者 带 来 帮助 。 


图 5.6 CSS Hack 效 果 图 (Windows Edge 浏览 器 ) 
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第 6 章 
<CSS 网 页 设计 基山 > 


本 章 我 们 介绍 CSS 网 页 设计 基础 。 在 CSS 网 页 设计 的 概念 里 ， 包 括 方方面面 的 内 容 ， 但 最 
基础 的 无 外 乎 就 是 关于 文字 、 背 景 、 边 界 和 定位 这 几 方 面 的 内 容 。 

本 章 主要 包括 以 下 内 容 : 

@ ”设计 文字 样式 

@ ”设计 背景 样式 

@ ”设计 边界 样式 

@ ”网 页 元 素 定位 


设计 文字 样式 


如 果 直 接 在 网 页 代码 中 设计 文字 ， 那 就 会 产生 很 多 的 重复 代码 ， 比 如 标题 都 统一 用 一 个 文字 
样式 ， 则 每 个 标题 都 要 写 上 文字 样式 代码 。 但 如 果 用 CSS 先 统一 设计 好 标题 样式 ， 在 网 页 中 直 
接 引用 这 种 样式 即 可 ， 修 改 的 话 也 只 需要 修改 CSS 代码 ， 不 需要 将 整个 HTML 文档 都 修改 得 面 
目 全 非 。 


6.1.1 字体 属性 


关于 CSS 字体 属性 主要 包括 以 下 内 容 : 字体 系列 、 字 体 大 小 、 字 体 加 粗 、 和 斜体 和 变形 风 
格 ， 等 等 。 在 CSS 规范 中 ， 对 于 这 些 字体 属性 均 有 相关 定义 ， 设 计 人 员 通 过 设 定 这 些 CSS 字体 
属性 ， 就 可 以 得 到 预期 的 字体 效果 。 

下 面 我 们 针对 这 些 字体 属性 一 一 进行 介绍 。 


1 . 字体 系列 


在 CSS 规范 中 ， 定 义 了 两 种 不 同类 型 的 字体 系列 ， 分 别 是 通用 字体 系列 和 特定 字体 系列 ， 
具体 如 下 : 
@ ”通用 字体 系列 : 拥有 相似 外 观 的 字体 系统 组 合 ; CSS 规范 共 定 义 了 5 种 通用 字体 ， 分 
别 是 Serif 字体 、Sans-serif 字体 、Monospace 字体 、Cursive 字体 和 Fantasy 字体 ; 
@ ”特定 字体 系列 : 具体 的 字体 系列 (比如 "Times"、"Courier"、"Georgia" 等 ) ; 


【示例 6-1】 CSS 之 字体 系列 
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在 这 段 代码 中 ， 我 们 使 用 CSS 的 font-family 字体 属性 定义 了 一 系列 HTML 标签 元 素 的 字体 
系列 。 下 面 我 们 详细 介绍 一 下 : 

第 07 行 代码 使 用 font-family 字体 属性 定义 了 body 标签 元 素 内 的 全 部 字体 系列 为 通用 字体 

(sans-serif); 同 理 ， 第 16 行 与 第 25 行 代码 为 h2 与 hs 标签 元 素 也 定义 了 通用 字体 ; 

第 10 行 代 码 使 用 font-family 字体 属性 定义 了 nav 标签 元 素 内 的 全 部 字体 系列 为 特定 字体 与 
通用 字体 的 组 合 〈' 黑 体 ，serif); 使 用 组 合 字 体系 列 定 义 是 为 了 避免 系统 在 没有 安装 特定 字体 的 
条 件 下 ， 浏 览 器 能 够 使 用 通用 字体 来 显示 文字 ; 同 理 ， 第 13 行 、 第 19 行 、 第 22 行 与 第 28 行 代 
码 也 使 用 组 合 字体 系列 定义 了 相应 的 标签 元 素 。 

运行 测试 这 个 页 面 ， 效 果 如 图 6.1 所 示 。 
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图 6.1 CSS 之 字体 系列 


2 . 字体 大 小 
在 CSS 规范 中 ， 通 过 font-size 属性 可 以 定义 字体 大 小 ， 其 属性 值 可 以 是 预定 义 大 小 值 ， 相 
对 大 小 值 ， 也 可 以 是 百分比 大 小 或 者 固定 大 小 值 ， 具 体 如 下 : 
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@@ ”预定 义 大 小 : xx-small、x-small、small、medium、large、x-large 和 xx-large， 默 认 值 是 
medium; 

@ ”相对 大 小 : smaller 或 larger; 

@ ”百分比 大 小 : 基于 父 元 素 的 一 个 百分比 值 ; 

@ 。 固定 大 小 : 实际 的 像素 尺寸 值 (单位 如 px、em 等 ) 。 


下 面 的 这 段 代 码 (参见 源 代码 chapter06/ch06-font-size.html 文件 ) 是 一 个 设置 字体 大 小 
的 应 用 。 


【示例 6-2】 


CSS 之 字体 大 小 
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在 这 段 代 码 中 ， 我 们 使 用 CSS 的 font-size 字体 属性 定义 了 一 系列 HTML 标签 元 素 的 字体 大 
小 。 下 面 我 们 详细 介绍 一 下 : 

第 07 行 代码 使 用 font-size 字体 属性 定义 了 body 标签 元 素 内 的 全 部 字体 大 小 为 medium ( 默 
认 大 小 ); 

第 10 行 代码 使 用 font-size 字体 属性 定义 了 nav 标签 元 素 内 的 全 部 字体 大 小 为 large; 
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第 13 行 代码 使 用 font-size 字体 属性 定义 了 div 标签 元 素 内 的 全 部 字体 大 小 为 small, 第 49 
行 代码 中 定义 的 文本 将 使 用 该 字体 大 小 ; 

第 16 行 代码 使 用 font-size 字体 属性 定义 了 h2 标签 元 素 内 的 全 部 字体 大 小 为 xx-large; 

第 19 行 代码 使 用 font-size 字体 属性 定义 了 h3 标签 元 素 内 的 全 部 字体 大 小 为 x-large; 

第 22 行 代码 使 用 font-size 字体 属性 定义 了 h4 标签 元 素 内 的 全 部 字体 大 小 为 x-small; 

第 25 行 代码 使 用 font-size 字体 属性 定义 了 hs 标签 元 素 内 的 全 部 字体 大 小 为 xx-small; 

第 28 行 代码 使 用 font-size 字体 属性 定义 了 p 标签 元 素 内 的 全 部 字体 大 小 为 smaller; 由 于 
smaller 是 相对 大 小 〈 相 对 于 父 元 素 )， 该 p 标签 元 素 的 父 元 素 是 第 48 行 代码 定义 的 div 标签 元 
素 ， 因 此 第 28 行 代码 定义 的 字体 大 小 是 相对 于 第 13 行 代 码 定义 的 字体 大 小 〈smaller) 来 确 
定 的 ; 

第 31 行 代码 使 用 font-size 字体 属性 定义 了 p 标签 元 素 内 的 全 部 字体 大 小 为 larger; 同 第 28 
行 代码 一 样 ， 第 31 行 代码 定义 的 字体 大 小 也 是 相对 于 第 13 行 代码 定义 的 字体 大 小 〈smaller) 来 
确定 的 ; 

第 34 行 代码 用 font-size 字体 属性 定义 了 p 标签 元 素 内 的 全 部 字体 大 小 为 150%; 同样 ， 这 
个 百分比 也 是 相对 于 第 13 行 代码 定义 的 字体 大 小 (smaller) 来 确定 的 ; 

第 37 行 代码 用 font-size 字体 属性 定义 了 p 标签 元 素 内 的 全 部 字体 大 小 为 32px， 该 值 是 一 个 
固定 值 ( 相 对 于 屏幕 像素 来 讲 ); 

最 后 ， 第 61 行 代码 定义 了 一 个 页 面 底部 ， 前 面 的 CSS 样式 代码 没有 为 其 专门 设置 字体 大 
小 ， 那 么 其 字体 大 小 将 继承 于 为 页 面 body 标签 元 素 定 义 的 字体 大 小 〈 见 第 07 行 代码 定义 的 
medium )。 


运行 测试 这 个 页 面 ， 效 果 如 图 6.2 所 示 。 
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图 6.2 CSS 之 字体 大 小 
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3 . 字体 风格 


在 CSS 规范 中 ， 通 过 font-style 属性 可 以 定义 字体 风格 ， 其 属性 值 可 以 是 normal、italic、 
oblique 和 inherit， 其 具体 含义 如 下 : 

@ normal: 浏览 器 会 显示 一 个 标准 的 字体 样式 风格 ; 

@ italic: 浏览 器 会 显示 一 个 针 体 的 字体 样式 风格 ; 

@ oblique: 浏览 器 会 显示 一 个 倾斜 的 字体 样式 风格 ; 

@@ inherit， 继承 自 父 元 素 的 字体 样式 风格 。 

下 面 的 这 段 代 码 (参见 源 代码 chapter06/ch06-font-style.html 文件 ) 是 一 个 设置 字体 风格 
的 应 用 。 


【示例 6-3】 CSS 之 字体 风格 
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【 第 6 章 CSS 网 页 设计 基础 


在 这 段 代 码 中 ， 我 们 使 用 CSS 的 font-style 字体 属性 定义 了 一 系列 HTML 标签 元 素 的 字体 风 
格 。 下 面 我 们 详细 介绍 一 下 : 

第 09 行 、 第 12 行 和 第 15 行 代码 使 用 font-style 字体 属性 定义 了 body、nav 和 div 标签 元 素 
内 的 全 部 字体 风格 为 normal; 

第 18 行 代码 使 用 font-style 字体 属性 定义 了 h3 标签 元 素 内 的 全 部 字体 风格 为 oblique; 

第 21 行 代码 使 用 font-style 字体 属性 定义 了 p 标签 元 素 内 的 全 部 字体 风格 为 italic; 

最 后 ， 第 39 行 代码 定义 了 一 个 页 面 底部 ， 前 面 的 CSS 样式 代码 没有 为 其 专门 设置 字体 风 
格 ， 那 么 其 字体 风格 将 继承 于 为 页 面 body 标签 元 素 定义 的 字体 风格 〈 见 第 09 行 代码 定 义 的 
normal )。 


运行 测试 这 个 页 面 ， 效 果 如 图 6.3 所 示 。 
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《CSS 网 页 设计 基础 之 字体 风格 ( font-style: normat ) 
font-style: normak: 


font-style: oblique; 
font-styte: italic 
font-style: normat: 


6.3 ”CSS 之 字体 风格 


4 . 字体 加 粗 


在 CSS 规范 中 ， 通 过 font-weight 属性 可 以 定义 字体 加 粗 ， 其 属性 值 可 以 是 normal、bold、 
bolder、lighter、inherit 和 自 定义 数值 ， 其 具体 含义 如 下 : 


@ ”normal: 浏览 器 会 显示 一 个 标准 粗细 的 字体 ; 
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@ bold: 浏览 器 会 显示 一 个 粗 体 的 字体 ; 

@ ”bolder: 浏览 器 会 显示 一 个 相对 于 normal 更 粗 的 字体 ; 

@ lighter: 浏览 器 会 显示 一 个 相对 于 normal 更 细 的 字体 ; 

@ inherit: 继承 自 父 元 素 的 字体 加 粗 ; 

@ 自 定 义 数值 ， 取 值 为 100、200、300、.……、 900; 其 中 400 相当 于 normal，700 相当 
于 bold。 


下 面 的 这 段 代码 (参见 源 代码 chapter06/ch06-font-weight.html 文件 ) 是 一 个 设置 字体 加 粗 的 
应 用 。 


【示例 6-4】 CSS 之 字体 加 粗 


GC 第 6 章 “CSS 网 页 设计 基础 


在 这 段 代码 中 ， 我 们 使 用 CSS 的 font-weight 字体 属性 定义 了 一 系列 HTML 标签 元 素 的 字体 
加 粗 。 下 面 我 们 详细 介绍 一 下 : 
第 10 行 、 第 13 行 和 第 19 行 代码 使 用 font-weight 字体 属性 定义 了 body、nav 和 p 标签 元 素 
《class="normal") 内 的 全 部 字体 加 粗 属 性 值 为 normal; 
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第 16 行 代码 使 用 font-weight 字体 属性 定义 了 div 标签 元 素 内 的 全 部 字体 加 粗 属 性 值 为 
100; 

第 22 行 代码 使 用 font-weight 字体 属性 定义 了 p 标签 元 素 (class="bold"〉 内 的 全 部 字体 加 粗 
属性 值 为 bold; 

第 25 行 代码 使 用 font-weight 字体 属性 定义 了 p 标签 元 素 (class="bolder") 内 的 全 部 字体 加 
粗 属 性 值 为 bolder; 

第 28 行 代码 使 用 font-weight 字体 属性 定义 了 p 标签 元 素 (class="lighter"〉 内 的 全 部 字体 加 
粗 属 性 值 为 lighter; 

第 31 行 、 第 34 行 、 第 37 行 和 第 40 行 代码 使 用 font-weight 字体 属性 定义 了 四 个 p 标签 元 
素 内 的 全 部 字体 加 粗 属 性 值 分 别 为 200、400 (等 于 normmal)、700 (等 于 bold) 和 900; 

最 后 ， 第 65 行 代码 定义 了 一 个 页 面 底部 ， 前 面 的 CSS 样式 代码 没有 为 其 专门 设置 字体 加 
粗 ， 那 么 其 字体 加 粗 将 继承 于 为 页 面 body 标签 元 素 定义 的 字体 风格 〈 见 第 10 行 代码 定义 的 
normal)。 

运行 测试 这 个 页 面 ， 效 果 如 图 6.4 所 示 。 从 图 中 显示 的 结果 可 以 看 到 ，font-weight 属性 值 为 
400 与 normal 的 显示 效果 是 一 致 的 ，font-weight 属性 值 为 700 与 bold 的 显示 效果 是 一 致 的 。 另 
外 需要 读者 注意 的 是 ，bolder 是 相对 于 normal 而 言 的 ， 从 图 中 可 以 看 到 bold 比 bolder 的 字体 还 
要 粗 。 
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图 6.4 CSS 之 字体 加 粗 


6.1.2 段落 属性 


CSS 段落 属性 主要 包括 以 下 内 容 : 行 高 、 字 距 、 缩 进 、 对 齐 方式 、 大 小 写 和 下 划 线 ， 等 
等 。 在 CSS 规范 中 ， 对 于 这 些 段 落 属性 均 有 相关 定义 ， 设 计 人 员 通 过 设 定 这 些 CSS 段落 属性 ， 
就 可 以 得 到 预期 的 页 面 效 果 。 

下 面 我 们 针对 这 些 段落 属性 一 一 进行 介绍 。 
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1 . 行 高 
在 CSS 规范 中 ， 定 义 了 几 种 方式 来 表现 行 高 ， 具 体 如 下 : 


默认 行 高 : 使 用 normal 来 定义 默认 行 高 ， 浏 览 器 会 取 最 合理 的 值 ; 

数字 行 高 : 使 用 1、2、.………… n 数字 来 定义 行 高 ， 浏 览 器 会 使 用 数字 乘 以 当前 字体 大 
小 尺寸 来 设置 行 高 ; 

百分比 行 高 : 基于 当前 字体 大 小 尺寸 的 百分比 设置 行 高 ; 

固定 值 行 高 : 使 用 固定 的 数值 (单位 为 px 或 em 等 ) ; 

继承 行 高 : 使 用 inherit 来 定义 继承 行 高 ， 浏 览 器 根据 父 元 素 的 行 高 取 值 。 


下 面 的 这 段 代码 (参见 源 代码 chapter06/ch06-line-height.html 文件 ) 是 一 个 设置 段落 行 高 的 


应 用 。 


【示例 6-5】 CSS 之 段落 行 高 
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第 6 章 CSS 网 页 设计 基础 


在 这 段 代 码 中 ， 我 们 使 用 CSS 的 line-height 段落 属性 定义 了 一 系列 HTML 标签 元 素 的 段落 
行 高 。 下 面 我 们 详细 介绍 一 下 : 
第 09 行 代码 使 用 line-height 段落 属性 定义 了 body 标签 元 素 内 的 全 部 行 高 为 normal; 同 理 ， 
第 12 行 与 第 18 行 代码 为 nav 与 p 标签 元 素 (class="normal") 也 定义 了 相同 的 行 高 ; 
第 15 行 代码 使 用 line-height 段落 属性 定义 了 div 标签 元 素 内 的 行 高 固定 值 《line-height: 
14px); 
第 21 行 代码 使 用 line-height 段落 属性 定义 了 p 标签 元 素 〈class="lhx2"〉 内 的 数字 行 高 
(line-height: 2); 
第 24 行 代码 使 用 line-height 段落 属性 定义 了 p 标签 元 素 〈class="percent300") 内 的 百分比 
行 高 (line-height: 300%); 
第 27 行 代码 使 用 line-height 段落 属性 定义 了 p 标签 元 素 〈class="length") 内 的 行 高 固定 值 
(line-height: 8px); 注意 ， 该 行 高 固定 值 是 小 于 字体 大 小 尺寸 的 〈 见 第 08 行 代码 定义 的 font- 
Size: 14px )。 


运行 测试 这 个 页 面 ， 效 果 如 图 6.5 所 示 。 从 图 中 显示 的 结果 可 以 看 到 ， 当 设置 的 行 高 小 于 字 
体 大 小 尺寸 时 ， 页 面 会 显示 出 来 重 车 的 字体 效果 。 


图 6.5 CSS 之 段落 行 高 


2 . 字 距 与 词 距 
在 CSS 规范 中 ， 使 用 letterspacing 来 定义 字 距 ， 使 用 word-spacing 来 定义 词 距 。 对 于 英文 
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文本 来 讲 ， 所 谓 letter-spacing( 字 距 ) 就 是 字母 之 间 的 空白 间距 ，word-spacing 〈 词 距 ) 就 是 单 
词 之 间 的 空白 间距 ， 而 对 于 中 文 文本 来 讲 ， 一 般 使 用 letter-spacing 设置 字 与 字 之 间 的 空白 间距 。 

下 面 的 这 段 代码 (参见 源 代码 chapter06/ch06-lw-spacing.html 文件 ) 是 一 个 设置 字 距 和 词 距 
的 应 用 。 


【示例 6-6】 CSS 之 字 距 和 词 距 


攻 第 6 章 CSS 网 页 设计 基础 


在 这 段 代码 中 ， 我 们 使 用 CSS 的 letter-spacing 和 word-spacing 段落 属性 定义 了 一 系列 
HTML 标签 元 素 的 字 距 和 词 距 。 下 面 我 们 详细 介绍 一 下 : 

第 09 一 10 行 代码 使 用 letter-spacing 和 word-spacing 段落 属性 定义 了 body 标签 元 素 内 的 全 部 
字 距 和 词 距 为 normal; 同 理 ， 第 13 一 14 行 与 第 21 一 22 行 代码 为 nav 与 p 标签 元 素 
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(class="normal") 也 定义 了 相同 的 字 距 和 词 距 (normal ); 
第 17 行 代码 使 用 letter-spacing 段落 属性 为 div 标签 元 素 内 的 字 距 定义 了 固定 值 (letter- 
spacing: -2px); 第 18 行 代码 使 用 word-spacing 段落 属性 为 div 标签 元 素 内 的 词 距 定义 了 固定 值 
(word-spacing: 4px ); 此 处 读者 应 注意 ， 字 距 和 词 距 是 可 以 接收 负 值 的 ; 
第 25 行 代码 使 用 letter-spacing 段落 属性 为 p 标签 元 素 (class="lp"〉 内 的 字 距 定义 了 固定 值 
(letter-spacing: 4px); 
第 30 行 代 码 使 用 word-spacing 段落 属性 为 p 标签 元 素 (class="wp") 内 的 词 距 定 义 了 固定 值 
(word-spacing: 16px ); 
第 33 一 34 行 代码 使 用 letter-spacing 和 word-spacing 段落 属性 为 p 标签 元 素 〈class="ch") 内 
的 字 距 和 词 距 定义 了 固定 值 〈letterspacing: 8px;word-spacing: -2px); 
最 后 ， 第 63 一 65 行 代码 定义 了 一 个 p 标签 元 素 ， 前 面 的 CSS 样式 代码 没有 为 其 专门 设置 字 
距 和 词 距 ， 那 么 其 将 继承 为 父 元 素 div 标签 元 素 定义 的 字 距 和 词 距 〈 见 第 17 一 18 行 代码 )。 
运行 测试 这 个 页 面 ， 效 果 如 图 6.6 所 示 。 从 图 中 显示 的 结果 可 以 看 到 ， 当 letter-spacing 
与 word-spacing 属性 设置 成 负 值 时 ， 字 与 字 之 间 空 白 距离 就 是 负 值 ， 因 此 字 与 字 会 重 营 覆 
盖 ; 另外 ， 设 置 中 文 文本 的 字 距 和 词 距 时 ，letter-spacing 属性 会 起 作用 ， 而 word-spacing 属 
性 不 会 起 作用 。 
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CS5 网 责 设 计 基 础 之 字 托 辣 拭 ( normal ) 


letter-spacing: normalietter-spacing: 
normak word-spacing: normalword-spacing: 
Spacing: normat 


letrer-specing; 4pxletter-spacing; 
spx:letter-spacing: 4px; 


word-spacing: 16pxcword-spacing。 16pxword-spacing- 
16px 


图 6.6 CSS 之 字 距 和 词 距 
3 . 对 齐 与 缩 进 
在 CSS 规范 中 ， 使 用 text-align 来 定义 文本 对 齐 方式 ， 使 用 text-indent 来 定义 段落 首 行 
下 面 的 这 段 代码 (参见 源 代码 chapter06/ch06-text-align.html 文件 ) 是 一 个 设置 段落 对 齐 与 缩 
进 的 应 用 。 
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【示例 6-7】 CSS 之 对 齐 与 缩 进 


构建 移动 网 站 与 APP: HTML 5+CSS 3+jQuery Mobile 入 门 与 实战 四 


在 这 段 代码 中 ， 我 们 使 用 CSS 的 text-align 和 text-indent 段落 属性 实现 了 页 面 文本 的 对 齐 与 
缩 进 效果 。 下 面 我 们 详细 介绍 一 下 : 

第 13 一 16 行 代 码 使 用 text-align 和 text-indent 段落 属性 定义 了 div 标签 元 素 内 的 段落 的 对 齐 
与 缩 进 方式 ， 其 中 ，text-align 属性 值 为 left， 表 示 “ 左 对 齐 ”， text-indent 属性 值 为 “32px”， 表 
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示 段 落 首 行 的 缩 进 值 ; 
第 17 一 20 行 代码 使 用 text-align 和 text-indent 段落 属性 定义 了 p 标签 元 素 (class="center") 
内 段落 的 对 齐 与 缩 进 方式 ， 其 中 ，textralign 属性 值 为 center， 表 示 “ 中 间 对 齐 ”，text-indent 属性 
值 为 “32px”， 表 示 段 落 首 行 的 缩 进 值 ; 
第 21 一 24 行 代码 使 用 text-align 和 text-indent 段落 属性 定义 了 p 标签 元 素 (class="left") 内 
段落 的 对 齐 与 缩 进 方式 ， 其 中 ，text-align 属性 值 为 left， 表 示 “ 左 对 齐 ”，text-indent 属性 值 为 
“32px”， 表 示 段 落 首 行 的 缩 进 值 ; 
第 25 一 28 行 代码 使 用 text-align 和 text-indent 段落 属性 定义 了 p 标签 元 素 (class="right") 内 
段落 的 对 齐 与 缩 进 方式 ， 其 中 ，textralign 属性 值 为 iight， 表 示 “ 右 对 齐 ”，text-indent 属性 值 为 
“32px”， 表 示 段 落 首 行 的 缩 进 值 ; 
第 29 一 32 行 代码 使 用 text-align 和 text-indent 段落 属性 定义 了 p 标签 元 素 (class="justify") 
内 段落 的 对 齐 与 缩 进 方式 ， 其 中 ，textralign 属性 值 为 justify， 表 示 “ 两 端 对 齐 ” text-indent 属性 
值 为 “32px”， 表 示 段 落 首 行 的 缩 进 值 ; 
最 后 ， 第 67 一 71 行 代码 定义 了 一 个 p 标签 元 素 ， 前 面 的 CSS 样式 代码 没有 为 其 专门 设置 对 
齐 与 缩 进 方式 ， 那 么 其 将 继承 为 父 元 素 div 标签 元 素 定义 的 对 齐 与 缩 进 方式 〈 见 第 13 一 16 行 代 
码 )。 
运行 测试 这 个 页 面 ， 效 果 如 图 6.7 所 示 。 
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CSS$ 网 页 设计 里 此 之 对 齐 与 坊 运 


与 蝇 进 中间 对 亨 与 于 进 中 | 册 对 究 与 量 进 中 同 对 裕 与 奢 


右 对 齐 与 塘 进 右 对 齐 与 填 进 右 对 齐 与 夺 进 右 对 章 与 傅 进 右 对 章 
与 妨 远 右 对 齐 与 妨 进 右 对 齐 与 二 逃 右 对 齐 与 十 进 右 对 齐 与 里 进 


两 法 对齐 与 增进 两 六 对 齐 与 寺 进 两 六 对 齐 与 寺 进 两 让 对 章 与 多 
坦 两 请 对 章 与 依 进 再 锁 对 章 与 疙 者 两 讽 对 齐 与 增进 两 六 对 齐 与 填 进 


设置 对 章 与 情 进 设置 对 齐 与 岂 进 设置 对 亨 与 续 进 论 置 对 章 与 镀 进 ; 
慎 对 齐 与 博 进 设置 对 齐 与 峻 进 设置 对 齐 与 傅 进 设置 对 齐 与 坛 进 设置 
对 袍 与 鄙 进 


6.7 CSS 之 对 齐 与 缩 进 


6.1.3 ”文字 效果 


CSS 可 以 实现 很 多 种 文字 风格 效果 ， 辟 如 : 下 划 线 、 删 除 线 、 变 形 字体 、 阴 影 特效 、 发 光 
字体 、 翻 转 字体 ， 等 等 。 下 面 我 们 针对 这 些 CSS 文字 效果 一 一 进行 介绍 。 
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1 . 下 划 线 、 删 除 线 和 页 划 线 


在 CSS 规范 中 ， 使 用 text-decoration 文本 修饰 属性 来 定义 文本 下 划 线 、 删 除 线 和 项 划 线 。 关 
于 text-decoration 属性 值 具体 如 下 : 


@ underline: 定义 文本 下 划 线 ; 

@ overline: 定义 文本 顶 划 线 ; 

@ line-through: 定义 文本 删除 线 。 

下 面 的 这 段 代 码 〈 参 见 源 代码 chapter06/ch06-text-decoration.html 文件 ) 是 一 个 设置 文本 下 
划 线 、 顶 划 线 和 删除 线 的 应 用 。 


【示例 6-8】 CSS 之 文本 修饰 
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在 这 段 代 码 中 ， 我 们 使 用 CSS 的 text-decoration 文本 修饰 属性 实现 了 文本 下 划 线 、 顶 划 线 和 
删除 线 效果 。 下 面 我 们 详细 介绍 一 下 : 

第 17 行 代码 使 用 text-decoration 文本 修饰 属性 定义 了 p 标签 元 素 〈class="underline") 内 文 
本 下 划 线 样式 ; 

第 20 行 代码 使 用 text-decoration 文本 修饰 属性 定义 了 p 标签 元 素 (class="overcast"〉 内 文本 
顶 划 线 样式 ; 

第 23 行 代码 使 用 text-decoration 文本 修饰 属性 定义 了 p 标签 元 素 (class="line-through") 内 
文本 删除 线 样式 。 


运行 测试 这 个 页 面 ， 效 果 如 图 6.8 所 示 。 
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C55 网 页 设计 基础 之 文本 修饰 ( font-decoration: none' ) 


font-decoration: overline; 
font-decoration: hine throughe 
font-decoration: none; 


font-decoration: none; 


图 6.8 CSS 之 文本 修饰 
2 . CSS3 文字 阴影 效果 


在 CSS3 规范 中 ， 使 用 text-shadow 文本 阴影 属性 来 实现 文本 阴影 效果 。 关 于 text-shadow 属 
性 的 语法 如 下 : 


dr 
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h-shadow: 定义 水 平 阴影 的 位 置 ; 
V-shadow: 定义 垂直 阴影 的 位 置 ; 
blur: 定义 字体 模糊 距离 ; 

color: 定义 字体 颜色 。 


下 面 的 这 段 代 码 (参见 源 代码 chapter06/ch06-text-shadow.html 文件 ) 是 一 个 实现 文字 阴影 效 
果 的 应 用 。 


【示例 6-9】 CSS 之 文字 阴影 效果 


Sy 国有 ”第 6 章 CSS 网 页 设计 基础 


在 这 段 代 码 中 ， 我 们 使 用 CSS 的 text-shadow 文本 阴影 属性 实现 了 多 种 文字 阴影 效果 。 运 行 
测试 这 个 页 面 ， 效 果 如 图 6.9 所 示 。 


图 6.9 CSS 之 文本 修饰 


3 . CSS 3 文字 描 边 效果 
在 CSS 3 规范 中 ， 使 用 -webkit-text-stroke 属性 来 实现 文字 描 边 效果 。 另 外 ，-webkit-text- 
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stroke 属性 目前 仅仅 支持 使 用 webkit 内 核 的 Chrome 和 Safari 浏览 器 。 
下 面 的 这 段 代 码 〈 参 见 源 代 码 chapter06/ch06-text-stroke.html 文件 ) 是 一 个 实现 文字 描 边 效 
果 的 应 用 。 


【示例 6-10】 CSS 之 文字 描 边 效果 


在 这 段 代 码 中 ， 我 们 使 用 CSS 的 -webkit-text-stroke 属性 实现 了 文字 描 边 效 果 。 运 行 测试 这 
个 页 面 ， 效 果 如 图 6.10 所 示 。 
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图 6.10 CSS 之 文字 描 边 效果 


.2 设计 背景 样式 


网 页 一 般 是 白 底 黑 字 ， 但 在 Web 2.0 时 代 ， 越 来 越 多 的 网 页 有 了 自己 的 特色 ， 网 页 的 颜色 也 
丰富 多 彩 起 来 ， 本 节 通 过 设置 CSS 背景 样式 来 让 读者 发 现 网 页 的 多 彩 之 处 。 


6.2.1 设计 背景 颜色 


在 CSS 规范 中 ， 通 过 background-color 属性 可 以 设计 背景 颜色 ， 其 属性 值 可 以 是 预定 义 颜色 
名 称 ， 也 可 以 是 rgb 代码 或 十 六 进 制 固定 值 ， 还 可 以 是 透明 色 。 具 体 如 下 : 


@ color name: 规定 颜色 值 为 预定 义 颜 色 名 称 的 背景 颜色 ( 例如 : black、white 、red 
等 ) ; 

hex_number: 规定 颜色 值 为 十 六 进 制 值 的 背景 颜色 ( 例如: #ff0000) ; 

Tgb_number: 规定 颜色 值 为 rgb 代码 的 背景 颜色 ( 例如 : rgb(255,0,0) ) ; 

transparent: 默认 值 ， 表 示 背 景 颜色 为 透明 ; 

inherit 规定 继承 于 父 元 素 的 background-color 属性 值 。 


下 面 的 这 段 代码 参见 源 代码 chapter06/ch06-background-colorhtml 文件 ) 是 一 个 设置 字体 
大 小 的 应 用 。 


【示例 6-11】 CSS 之 背景 颜色 


181 


构建 移动 网 站 与 APP: HTML 5+CSS 3+jQuery Mobile 入 门 与 实战 访 


在 这 段 代 码 中 ， 我 们 使 用 CSS 的 background-color 属性 定义 了 一 系列 HTML 标签 元 素 的 背 
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景 颜色 。 下 面 我 们 详细 介绍 一 下 : 

第 09 行 代码 使 用 background-color 属性 定义 了 body 标签 元 素 内 的 全 部 背景 颜色 为 #0f0f0 

(一 种 淡 灰 色 ); 

第 13 行 代码 使 用 background-color 属性 定义 了 nav 标签 元 素 内 的 背景 颜色 为 black (黑色 ); 
同时 ， 为 了 能 够 显示 文字 ， 第 12 行 代码 定义 文字 颜色 为 white 〈 白 色 ); 

第 15 一 17 行 代码 使 用 background-color 属性 定义 了 div 标签 元 素 class="gray") 内 的 背景 颜 
色 为 grayy (灰色); 

第 18 一 20 行 代码 使 用 background-color 属性 定义 了 div 标签 元 素 (class="lightgray") 内 的 背 
景 颜 色 为 lightgray〔 淡 灰色 ); 

第 21 一 23 行 代码 使 用 background-color 属性 定义 了 div 标签 元 素 〈class="darkgray") 内 的 背 
景 颜色 为 darkgray 〈 深 灰色 )。 

运行 测试 这 个 页 面 ， 效 果 如 图 6.11 所 示 。 
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6.2.2 ”设计 背景 图 片 

在 CSS 规范 中 ， 通 过 background-image 属性 可 以 设计 背景 图 片 ， 其 属性 值 是 一 个 url 类 型 的 
图 片 链接 。 

下 面 的 这 段 代码 〈 参 见 源 代码 chapter06/ch06-background-image.html 文件 ) 是 一 个 设置 背景 
图 片 的 应 用 。 


【示例 6-12】 CSS 之 背景 图 片 
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10 } 


11 nav { 

2 color: white; 

Ei background-color: black; 

14 } 

5 </style> 

16 <title>CSS 网 页 设计 基础 之 背景 图 片 </title> 
17 </head> 

18 <body> 

19 <!-- 添加 文档 主体 内 容 --> 

20 <header id="id-header"> 

<nav>CSS 网 页 设计 基础 之 背景 图 片 </nav> 
22 </header> 

2 <hr> 

24 <footer> 

25 </footer> 

26 </body> 

27 </html> 


在 这 段 代码 中 ， 我 们 使 用 CSS 的 background-image 属性 定义 了 body 标签 元 素 的 背景 图 片 。 
下 面 我 们 详细 介绍 一 下 : 
第 09 行 代码 使 用 background-image 属性 定义 了 body 标签 元 素 内 的 背景 图 片 ， 其 属性 值 为 
个 url 图 片 链 接 (url(images/bg.jpg)); 
第 11 一 14 行 代码 使 用 background-color 属性 定义 了 nav 标签 元 素 内 的 背景 颜色 为 black( 黑 
色 ); 同时 ， 为 了 能 够 显示 文字 ， 第 12 行 代码 定义 文字 颜色 为 white 白色); 在 页 面 实际 显示 效 
果 中 ， 定 义 的 文字 将 显示 在 背景 图 片 之 上 。 
运行 测试 这 个 页 面 ， 效 果 如 图 6.12 所 示 。 


C55 网 门 安 it 生 友之 前 芒 


图 6.12 CSS 之 背景 图 片 
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6.2.3 设计 背景 渐变 


在 CSS 规范 中 ， 通 过 gradient 属性 可 以 设计 背景 颜色 渐变 效果 。 不 过 需要 注意 的 是 ， 不 同 
的 浏览 器 对 gradient 属性 的 定义 方式 是 不 一 样 的 。 

下 面 的 这 段 代 码 〈 参 见 源 代码 chapter06/ch06-linear-gradient html 文件 ) 是 一 个 设置 背景 颜色 
渐变 的 应 用 。 


【示例 6-13】 CSS 之 背景 颜色 渐变 


构建 移动 网 站 与 APP: HTML 5+CSS 3+jQuery Mobile 入 门 与 实战 】 


在 这 段 代码 中 ， 我 们 使 用 CSS 的 gradient 属性 定义 了 背景 颜色 渐变 效果 。 下 面 我 们 详细 介 
绍 一 下 : 

第 14 一 23 行 代 码 使 用 gradient 属性 定义 了 div 标签 元 素 (class="class1") 内 的 背景 颜色 渐变 
效果 是 由 深 至 浅 ( 从 颜色 #333 渐变 至 颜色 #H0ffD ); 

其 中 ， 第 17 行 代码 使 用 -ms-linear-gradient 关键 字 定 义 方式 是 针对 IE10 浏览 器 的 ; 

第 18 行 代码 使 用 -moz-linear-gradient 关键 字 定义 方式 是 针对 FireFox 浏览 器 的 ; 

第 19 一 20 行 代码 使 用 -webkit-gradient 关键 字 定义 方式 是 针对 早期 Chrome 和 Safari 浏 
览 器 的 ， 

第 21 行 代码 使 用 -webkit-linear-gradient 关键 字 定 义 方式 是 针对 目前 Chrome 10+ 和 Safari 5.1+ 
版 本 浏览 器 的 ; 

第 22 行 代码 使 用 -0-linear-gradient 关键 字 定义 方式 是 针对 最 新 的 Opera 10+ 11+ 版 本 浏 
览 器 的 。 
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运行 测试 这 个 页 面 ， 效 果 如 图 6.13 所 示 。 


图 6.13 CSS 之 背景 颜色 渐变 效果 


名. 林 设计 边界 样式 


本 节 要 介绍 的 边界 样式 为 常见 的 3 个 : 边框、 内 边 距 和 外 边 距 。 设 置 了 这 些 边 界 样式 后 ， 网 
页 的 视角 才 会 更 分 明 ， 网 页 中 的 内 容 才 会 更 错落 有 致 。 


6.3.1 边框 


在 CSS 规范 中 ， 通 过 border 属性 可 以 设计 边框 样式 ， 关 于 边框 的 属性 有 border-color、 
border-style 和 border-width 三 种 。 


(1) border-color: 规定 边框 颜色 值 ， 颜 色 的 取 值 方式 如 下 : 


@ color name: 规定 颜色 值 为 预定 义 颜 色 名 称 的 背景 颜色 (例如 : black、white 、red 
等 ) ; 

@ hex_number: 规定 颜色 值 为 十 六 进 制 值 的 背景 颜色 (例如 : #0000 ) ; 

@  Igb number: 规定 颜色 值 为 rgb 代码 的 背景 颜色 (例如 : rgb(255,0,0) ) ; 

@ transparent: 默认 值 ， 表 示 背 景 颜色 为 透明 ; 

@ inherit: 规定 继承 于 父 元 素 的 background-color 属性 值 。 


(2) borderstyle: 规定 边框 样式 ， 边 框 样式 的 定义 方式 如 下 : 


@ none: 定义 无 边框 ; 
@@ hidden: 与 "none" 相 同 ， 但 应 用 于 表 时 除外 ，hidden 可 以 用 于 解决 边框 冲突 ; 
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dotted: 定义 点 状 边框 ， 不 过 在 大 多 数 浏览 器 中 可 能 呈现 为 实 线 ; 
dashed: 定义 虚线 ， 不 过 同样 在 大 多 数 浏览 器 中 可 能 呈现 为 实 线 ; 
solid: 定义 实 线 ; 

double: 定义 双 线 ， 双 线 的 宽度 等 于 border-width 定义 的 值 ; 
groove: 定义 3D 凹 楼 边框 ， 其 效果 取决 于 border-color 定义 的 值 ; 
ridge: 定义 3D 鸡 状 边框 ， 其 效果 取决 于 bordercolor 定 义 的 值 ; 
inset: 定义 3D inset 边框 ， 其 效果 取决 于 border-color 定义 的 值 ; 
outset: 定义 3D outset 边框 ， 其 效果 取决 于 border-color 定义 的 值 ; 
inherit: 规定 从 父 元 素 继承 边框 样式 。 


(3) border-width: 规定 边框 宽度 ， 其 可 以 取 如 下 值 : 

medium: 默认 值 ， 定 义 中 等 宽度 边框 ; 

thin: 定义 细 边 框 ; 

thick: 定义 粗 边框 ; 

length: 允许 自 定义 边框 的 宽度 ; 

inherit: 规定 继承 于 父 元 素 的 边框 宽度 。 

下 面 的 这 段 代码 (参见 源 代码 chapter06/ch06-borderhtml 文件 ) 是 一 个 设置 边框 的 应 用 。 


【示例 6-14】 CSS 之 边框 
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在 这 段 代 码 中 ， 我 们 使 用 CSS 的 border 边框 属性 定义 了 一 系列 HTML 标签 元 素 的 边框 效 
果 。 下 面 我 们 详细 介绍 一 下 : 

第 14 行 代码 使 用 border 属性 定义 了 div 标签 元 素 (class="border1") 的 边框 样式 (border: 
medium solid rgb(0,0,0);)， 其 中 medium 表示 中 等 边框 ，solid 表示 实 线 ， 颜 色 rgb(0,0,0) 为 黑色 ; 

第 17 一 19 行 代码 分 别 使 用 border-width 属性 、border-style 属性 和 border-color 属性 定义 了 
div 标签 元 素 (class="border2") 的 边框 样式 ，border-width: thin 表示 细 边 框 ，border-style: solid 表 
示 边 框 样式 为 实 线 ，border-color: black 表示 边框 颜色 为 黑色 ; 

第 22 行 代码 使 用 border 属性 定义 了 div 标签 元 素 (class="border3") 的 边框 样式 (border: 
thick solid rgb(0,0,0);)， 其 中 thick 表示 粗 边框 ; 

第 25 一 27 行 代码 分 别 使 用 border-width 属性 、border-style 属性 和 border-color 属性 定义 了 
div 标签 元 素 (class="border4") 的 边框 样式 ;border-width: 8px 表示 边框 实际 宽度 为 8px，border- 
color: rgb(192,192,192) 表 示 边 框 颜 色 为 一 种 灰色 ; 

第 30 行 代码 使 用 border 属性 定义 了 div 标签 元 素 (class="border5") 的 边框 样式 (border: 
medium double rgb(0,0,0);)， 其 中 double 表示 双 线 框 ; 
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第 33 一 35 行 代码 分 别 使 用 border-width 属性 、border-style 属性 和 border-color 属性 定义 了 
div 标签 元 素 (class="border6") 的 边框 样式 ; border-style: dashed 表示 边框 样式 为 虚线 ; 

第 38 行 代 码 使 用 border 属性 定义 了 div 标签 元 素 〈class="border7") 的 边框 样式 (border: 
medium dotted rgb(0,0,0);)， 其 中 dotted 表示 点 状 线 边框 ; 

第 41 一 43 行 代码 分 别 使 用 border-width 属性 、border-style 属性 和 border-color 属性 定义 了 
div 标签 元 素 (class="border8") 的 边框 样式 ，border-style: groove 表示 边框 为 3D 四 模 样式 。 

运行 测试 这 个 页 面 ， 效 果 如 图 6.14 所 示 。 


one x 瑟 


6.14 CSS 之 边框 效果 


使 用 border 属性 与 分 别 使 用 border-width 属性 、border-style 属性 和 border-color 属性 定义 边框 
| 的 方式 不 一 样 ， 但 现实 的 效果 是 完全 一 致 的 。 


6.3.2 ”内 边 距 


在 CSS 规范 中 ， 通 过 padding 属性 可 以 定义 内 边 距 样 式 ， 所 谓 内 边 距 就 是 指 元 素 边框 与 元 
素 内 容 间 的 空白 区 域 。 同 时 ，padding 属性 可 以 分 成 padding-top (上 )、padding-right( 右 )、 
padding-bottom (下 ) 和 padding-left 〈 左 )， 四 个 属性 分 别 定义 四 个 方向 的 内 边 距 。padding 属性 
可 以 按照 以 下 几 种 方式 定义 : 

@ ”auto: 通过 浏览 器 计算 内 边 距 值 ; 

@ length: 规定 固定 内 边 距 值 (单位 为 px、cm 等 ) ; 

@ 百分比 (%) : 基于 父 元 素 宽度 的 百分比 定义 内 边 距 值 。 


一 不 允许 定义 负 的 内 边 距 值 。 | 


下 面 的 这 段 代码 (参见 源 代码 chapter06/ch06-paddinghtml 文件 ) 是 一 个 设置 内 边 距 的 应 用 。 
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在 【示例 6-15】 这 段 代 码 中 ， 我 们 使 用 CSS 的 padding 属性 定义 了 一 系列 HTML 标签 元 素 
的 内 边 距 。 下 面 我 们 详细 介绍 一 下 : 

第 15 行 代 码 使 用 padding 属性 定义 了 div 标签 元 素 〈class="paddingl") 的 内 边 距 ，padding: 
32px 表示 上 下 左右 的 内 边 距 均 为 固定 值 32px; 

第 19 行 代 码 使 用 padding 属性 定义 了 div 标签 元 素 (class="padding2") 的 内 边 距 ，padding: 
32px 16px 8px 4px 表示 上 内 边 距 为 固定 值 32px、 右 内 边 距 为 固定 值 16px、 下 内 边 距 为 固定 值 
8px、 左 内 边 距 为 固定 值 4px; 

第 23 一 26 行 代码 分 别 使 用 padding-top: 4px、padding-right 8px、padding-bottom: 32px 和 
padding-left: 16px 属性 定义 了 div 标签 元 素 〈class="padding3") 的 上 下 左右 内 边 距 ; 

第 30 行 代码 使 用 padding 属性 定义 了 div 标签 元 素 〈class="padding4") 的 内 边 距 ，padding: 
lcm 0.5cm lcm 0.5cm; 表 示 上 内 边 距 为 固定 值 lem、 右 内 边 距 为 固定 值 0.5cm、 下 内 边 距 为 固定 
值 lem、 左 内 边 距 为 固定 值 0.5cm， 此 处 内 边 距 单位 为 厘米 。 

运行 测试 这 个 页 面 ， 效 果 如 图 6.15 所 示 。 
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6.15 CSS 之 内 边 距 


6.3.3 外边 距 


在 CSS 规范 中 ， 通 过 margin 属性 可 以 定义 外 边 距 样式 ， 所 谓 外 边 距 就 是 指 元 素 边框 与 外 部 
容器 间 的 空白 区 域 距离 。 同 时 ，margin 属性 也 可 以 分 成 margin-top (上 )、margin-right〈 右 )、 
margin-bott om 下) 和 margin-left 〈 左 7， 四 个 属性 分 别 定义 四 个 方向 的 内 外 距 。margin 属性 可 
以 按照 以 下 几 种 方式 定义 : 


@ ”auto: 通过 浏览 器 计算 外 边 距 值 ; 
@ length: 规定 固定 外 边 距 值 (单位 为 px、cm 等 ) ; 
@ 百分比 (%) : 基于 父 元 素 宽度 的 百分比 定义 外 边 距 值 。 


副 margin 是 允许 定义 负 的 外 边 距 值 的 。 


下 面 的 这 段 代码 (参见 源 代码 chapter06/ch06-margin.html 文件 ) 是 一 个 设置 外 边 距 的 应 用 。 
【示例 6-16】 CSS 之 外 边 距 
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在 这 段 代码 中 ， 我 们 使 用 了 CSS 的 margin 属性 定义 了 一 系列 HTML 标签 元 素 的 外 边 距 。 下 
面 我 们 详细 介绍 : 

第 13 一 17 行 代 码 使 用 border、margin 和 padding 属性 定义 了 div 标签 元 素 的 边框 和 内 外 边 
距 ， 该 div 标签 元 素 相当 于 一 个 容器 ， 包 含 了 第 47 一 65 行 代码 定义 的 一 系列 div 标签 元 素 ; 

第 20 行 代码 使 用 margin 属性 定义 了 div 标签 元 素 〈class="margin1") 的 外 边 距 ，margin: 
32px 表示 上 下 左右 的 外 边 距 均 为 固定 值 32px; 第 24 行 代码 使 用 margin 属性 定义 了 div 标签 元 
素 (class=" margin2") 的 外 边 距 ，margin: 32px 16px 8px 4px 表示 上 外 边 距 为 固定 值 32px、 右 外 
边 距 为 固定 值 16px、 下 外 边 距 为 固定 值 8px、 左 外 边 距 为 固定 值 4px; 

第 28 一 31 行 代 码 分 别 使 用 margin-top: 4px、margin-right: 8px 、margin-bottom: 32px 和 
margin-left: 16px 属性 定义 了 div 标签 元 素 (class="margin3") 的 上 下 左右 外 边 距 ; 第 35 行 代码 
使 用 margin 属性 定义 了 div 标签 元 素 〈class="margin4" ) 的 外 边 距 ，margin: lcm 0.5cm -lem 
0.5cm; 表 示 上 外 边 距 为 固定 值 lem、 右 外 边 距 为 固定 值 0.5cm、 下 外 边 距 为 固定 值 -1cm、 左 外 边 
距 为 固定 值 0.5cm， 此 处 外 边 距 单位 为 厘米 。 

运行 测试 这 个 页 面 ， 效 果 如 图 6.16 所 示 。 最 后 一 个 div 标签 元 素 (class="margin4") 原本 是 
定义 在 最 外 部 div 容器 内 的 ， 但 由 于 其 下 外 边 距 值 定义 为 -lcm 负 值 )， 因 此 在 实际 页 面 中 显示 
时 ， 超 出 了 最 外 部 div 容器 的 边框 。 
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图 6.16 CSS 之 外 边 距 


.A 网 页 元 素 的 定位 


所 谓 网 页 元 素 的 定位 ， 其 实 就 是 通过 CSS 的 一 系列 position 属性 对 网 页 元 素 位 置 进行 设 定 。 
在 CSS 规范 中 ，position 属性 可 以 取 的 值 有 relative、absolute、static、fixed 和 inherit 这 5 种 ， 其 
具体 含义 如 下 : 
@ relative: 生成 相对 定位 的 网 页 元 素 ， 相 对 于 其 正常 位 置 进行 定位 ; 
@ absolute: 生成 绝对 定位 的 网 页 元 素 ， 相 对 于 static 定位 以 外 的 第 一 个 父 元 素 进行 定 
位 。 网 页 元 素 的 位 置 通过 "left"、"top"、"right" 和 "bottom" 属 性 进行 设 定 ; 
@ static: 默认 值 ， 相 当 于 没有 定位 ， 网 页 元 素 出 现在 正常 的 流 中 (使 用 static 定位 就 相当 
于 忽略 了 top、bottom、left、right 或 者 z-index 的 定义 ) ; 
@ fixed: 生成 绝对 定位 的 元 素 ， 相 对 于 浏览 器 窗口 进行 定位 ， 元 素 的 位 置 通过 "left"、 
"top"、"right" 和 "bottom" 属 性 进行 设 定 ; 
@ inherit， 规定 从 父 元 素 继承 position 属性 的 设 定 。 


6.4.1 相对 定位 


在 CSS 规范 中 ， 通 过 设 定 position 属性 值 为 relative 来 实现 相对 定位 。 所 谓 相 对 定位 ， 就 是 
通过 设 定 某 元 素 的 垂直 或 水 平 的 位 置 (通过 top、right、bottom 和 left 实现 )， 让 这 个 元 素 “ 相 对 
于 ”其 起 点 进行 移动 。 

下 面 的 这 段 代码 (参见 源 代码 chapter06/ch06-position-relative html 文件 ) 是 一 个 设置 相对 定 
位 的 应 用 。 
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【示例 6-17】 CSS 之 相对 定位 


在 这 段 代码 中 ， 我 们 使 用 CSS 的 position 属性 定义 了 一 系列 div〈 层 ) 标签 元 素 的 相对 定 
位 。 下 面 我 们 详细 介绍 一 下 : 

第 13 一 18 行 代码 定义 了 一 个 div《〈 层 ) 标签 元 素 的 相对 定位 样式 ， 该 div 标签 元 素 相当 于 一 
个 容器 ， 包 含 了 第 67~71 行 代码 定义 的 一 组 div( 层 ) 标签 元 素 ; 其 中 ， 第 14 行 代码 使 用 
position: relative 表示 该 div 标签 元 素 为 相对 定位 方式 ， 第 15 一 17 行 代码 定义 了 该 div 标签 元 素 的 
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宽度 、 高 度 和 背景 颜色 ; 

第 19 一 24 行 代码 定义 了 一 个 div( 层 ) 标签 元 素 (class="relativel") 的 相对 定位 样式 ， 其 
中 ， 第 20 行 代码 使 用 position: relative 表示 该 div 标签 元 素 为 相对 定位 方式 ， 第 21 一 23 行 代码 定 
义 了 该 div 标签 元 素 的 宽度 (120px)、 高 度 (60px) 和 背景 颜色 ; 

第 25 一 32 行 代码 定义 了 一 个 div( 层 ) 标签 元 素 (class="relative2") 的 相对 定位 样式 ; 其 
中 ， 第 20 行 代码 使 用 position: relative 表示 该 div 标签 元 素 为 相对 定位 方式 ， 第 29 一 30 行 代码 定 
义 了 该 div 标签 元 素 的 上 位 移 〈top: 20px) 和 左 偏 移 (left: 50px); 

第 33 一 40 行 代码 定义 了 一 个 div( 层 ) 标签 元 素 (class="relative3") 的 相对 定位 样式 ; 其 
中 ， 第 34 行 代码 使 用 position: relative 表示 该 div 标签 元 素 为 相对 定位 方式 ， 第 37 一 38 行 代码 定 
义 了 该 div 标签 元 素 的 上 位 移 〈top: -3px) 和 左 偏 移 〈left: 80px ); 

第 41 一 48 行 代码 定义 了 一 个 div〈 层 ) 标签 元 素 (class="relative4") 的 相对 定位 样式 ， 其 
中 ， 第 42 行 代码 使 用 position: relative 表示 该 div 标签 元 素 为 相对 定位 方式 ， 第 45 一 46 行 代码 定 
义 了 该 div 标签 元 素 的 上 位 移 (top: 30px) 和 左 偏 移 (left: -10px); 

第 49 一 56 行 代码 定义 了 一 个 div( 层 ) 标签 元 素 〈class="relative5") 的 相对 定位 样式 ; 其 
中 ， 第 50 行 代 码 使 用 position: relative 表示 该 div 标签 元 素 为 相对 定位 方式 ， 第 53 一 54 行 代码 定 
义 了 该 div 标签 元 素 的 上 位 移 (top: 20px) 和 左 偏 移 (left: 150px)。 

运行 测试 这 个 页 面 ， 效 果 如 图 6.17 所 示 。 
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CSS 网 页 设计 基础 之 相对 定位 


© 理 实 


6.17 CSS 之 相对 定位 


从 图 中 可 以 看 到 ， 第 67 一 71 行 代码 定义 的 5 个 div 标签 元 素 全 部 出 现在 第 13 一 18 行 代码 定 
义 的 div 元 素 容器 中 了 ， 只 不 过 每 个 div 标签 元 素 的 定位 均 不 一 样 ， 下 面 我 们 具体 分 析 一 下 : 


第 1 个 div 标签 元 素 (class="relative1") 由 于 没有 定义 偏 黎 ， 因 此 其 原点 显示 在 父 元 素 的 左 
上 和 角 原 点 位 置 ; 


第 2 个 div 标签 元 素 (class="relative2") 由 于 定义 了 上 偏 移 和 左 偏 移 ， 因 此 其 原点 相对 于 原 
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始 位 置 发 生 了 偏 移 ; 注意 ， 此 处 的 偏 移 是 相对 于 其 原始 位 置 来 计算 的 ; 那么 原始 位 置 是 什么 样 的 
呢 ? 读者 可 以 把 【示例 6-17】 代 码 中 全 部 关于 偏 移 的 CSS 样式 定义 去 掉 ， 在 浏览 器 中 运行 一 下 
就 明白 了 ; 

第 3 个 div 标签 元 素 (class="relative3") 由 于 定义 的 上 偏 移 为 -5px， 因 此 其 覆盖 在 第 2 个 div 
标签 元 素 之 上 ; 第 4 个 div 标签 元 素 (class="relative4") 由 于 定义 的 左 偏 移 为 -10px， 因 此 其 左边 
界 出 了 父 元 素 div 容器 ; 第 5 个 div 标签 元 素 〈class="relative5") 由 于 高 度 累 加 后 超出 了 父 元 素 
div 容器 定义 的 高 度 300px， 因 此 其 下 边界 也 出 了 父 元 素 div 容器 。 

设计 人 员 在 使 用 相对 定位 时 一 定 要 注意 ， 原 始 位 置 很 重要 ， 任 何 相对 偏 移 都 是 基于 原始 位 置 
计算 的 。 


6.4.2 ”绝对 定位 


在 CSS 规范 中 ， 通 过 设 定 position 属性 值 为 absolute 来 实现 绝对 定位 。 所 谓 绝对 定位 ， 也 就 
是 设 定 某 元 素 的 垂直 或 水 平 的 位 置 (通过 top、right、bottom 和 left 实现 )， 不 同 之 处 在 于 其 原点 
是 根据 最 近 一 个 有 定位 设置 的 父 元 素来 计算 的 ， 如 果 父 元 素 没有 设置 定位 属性 ， 则 将 以 body 标 
签 元 素 的 坐标 原点 进行 定位 。 

下 面 的 这 段 代码 (参见 源 代码 chapter06/ch06-position-absolute .html 文件 ) 是 一 个 设置 绝对 定 
位 的 应 用 。 


【示例 6-18〗】 ”CSS 之 绝对 定位 
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在 这 段 代码 中 ， 我 们 使 用 CSS 的 position 属性 定义 了 一 系列 div〈 层 ) 标签 元 素 的 绝对 定 
位 。 下 面 我 们 详细 介绍 一 下 : 

第 13 一 18 行 代码 定义 了 一 个 div〈 层 ) 标签 元 素 (class="absolutel") 的 绝对 定位 样式 ， 该 
div 标签 元 素 相当 于 一 个 容器 ， 包 含 了 第 65 一 80 行 代码 定义 的 一 组 div〈 层 ) 标签 元 素 ， 其中， 
第 14 行 代码 使 用 position: absolute 表示 该 div 标签 元 素 为 绝对 定位 方式 ， 第 15 一 17 行 代码 定义 
了 该 div 标签 元 素 的 宽度 、 高 度 和 背景 颜色 ; 

第 19 一 23 行 代码 定义 了 一 个 div〈 层 ) 标签 元 素 (class="absolute11")， 其 既 没有 使 用 绝对 
定位 也 没有 使 用 相对 定位 ; 

第 24 一 31 行 代码 定义 了 一 个 div( 层 ) 标签 元 素 (class="absolute111") 的 绝对 定位 样式 ; 
其 中 ， 第 25 行 代码 使 用 position: absolute 表示 该 div 标签 元 素 为 绝对 定位 方式 ;第 28 一 29 行 代 
码 定义 了 该 div 标签 元 素 的 上 位 移 (top: 30px) 和 左 偏 移 (left: 30px ); 

第 32 一 39 行 代码 定义 了 一 个 div〈 层 ) 标签 元 素 〈class="absolute1l111") 的 绝对 定位 样式 ; 
其 中 ， 第 33 行 代码 使 用 position: absolute 表示 该 div 标签 元 素 为 绝对 定位 方式 ;第 36~37 行 代 
码 定义 了 该 div 标签 元 素 的 上 位 移 (top: 30px) 和 左 偏 移 (left: 80px ); 

第 40 一 46 行 代码 定义 了 一 个 div( 层 ) 标签 元 素 〈class="relativel1111") 的 相对 定位 样式 ; 
其 中 ， 第 41 行 代码 使 用 position: relative 表示 该 div 标签 元 素 为 相对 定位 方式 ， 第 44 行 代 码 定义 
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了 该 div 标签 元 素 的 左 偏 移 (left: 20px); 

第 47 一 54 行 代码 定义 了 一 个 div〈 层 ) 标签 元 素 〈class="absolutel1111") 的 绝对 定位 样式 ; 
其 中 ， 第 48 行 代码 使 用 position: absolute 表示 该 div 标签 元 素 为 绝对 定位 方式 ; 第 51 一 52 行 代 
码 定义 了 该 div 标签 元 素 的 上 位 移 (top: 80px) 和 左 偏 移 (left: 30px )。 

运行 测试 这 个 页 面 ， 效 果 如 图 6.18 所 示 。 从 图 中 可 以 看 到 ， 第 64 一 81 行 代码 定义 的 一 系列 
div 标签 元 素 全 部 出 现在 页 面 中 了 ， 只 不 过 每 个 div 标签 元 素 的 定位 均 不 一 样 ， 下 面 我 们 具体 分 
析 一 下 : 


[ x 

€ 加 cahosts [CE 
CSS 网 页 设计 基础 之 绝对 定位 
地 对 神似 全 元 可 {class*"absolute1) 


6.18 ”CSS 之 绝对 定位 


第 1 个 div 标签 元 素 (class="absolute1") 相当 于 容器 ; 
第 2 个 div 标签 元 素 (class="absolute11") 相当 于 第 1 个 div 标签 元 素 (class="absolute1") 
的 子 元 素 ， 由 于 没有 使 用 定位 ， 因 此 该 div 标签 元 素 是 依次 显示 在 第 1 个 div 标签 元 素 
(class="absolutel") 内 部 的 ; 
第 3 个 div 标签 元 素 (class="absolutelll" ) 相当 于 第 2 个 div 标签 元 素 
(class="absolutell") 的 子 元 素 ， 由 于 使 用 了 绝对 定位 方式 ， 而 其 父 元 素 没有 定义 定位 方式 ， 其 
父 元 素 的 父 元 素 ， 即 第 1 个 div 标签 元 素 〈class="absolutel") 定义 了 绝对 定位 方式 ， 因 此 该 标签 
元 素 的 偏 移 值 ( 见 第 28 和 29 行 代码 ) 将 以 第 1 个 div 标签 元 素 〈class="absolutel") 作为 参照 ; 
第 4 个 div 标签 元 素 (class="absolute1111") 类 似 于 第 3 个 div 标签 元 素 ， 将 使 用 绝对 定位 
方式 进行 显示 ; 
第 5 个 div 标签 元 素 (class="relativel1111") 使 用 了 相对 定位 方式 ， 偏 移 量 将 以 第 4 个 div 
标签 元 素 为 原点 。 
第 6 个 div 标签 元 素 (class="absolutel1111") 与 第 5 个 div 标签 元 素 同 为 第 4 个 div 标签 元 
素 的 并 列子 元 素 ， 且 按照 绝对 定位 方式 进行 显示 。 
设计 人 员 在 使 用 绝对 定位 时 一 定 要 注意 ， 父 元 素 是 否 使 用 定位 方式 很 重要 ， 因 为 任何 绝对 偏 
移 都 是 基于 最 近 使 用 过 定位 方式 的 父 元 素来 进行 计算 的 。 
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6.5 4 竺 


本 章 主要 介绍 了 定义 CSS 网 页 设计 基础 ， 包 括 如 何 设计 文字 样式 、 背 景 样式 、 边 界 样式 和 
元 素 定位 的 相关 内 容 ， 希 望 这 些 关 于 CSS 基础 设计 的 内 容 能 给 广大 读者 带 来 帮助 。 


205 


本 章 我 们 介绍 CSS 选择 器 的 使 用 。 那 么 什么 是 CSS 选择 器 呢 ? 我 们 知道 ，CSS 样式 定义 由 
选择 器 和 样式 两 部 分 组 成 ， 即 语法 形式 : 选择 器 {样式 }， 在 大 括号 之 前 的 部 分 就 是 “选择 器 ”。 
选择 器 用 于 表明 样式 所 作用 的 对 象 ， 或 者 是 具体 作用 于 网 页 中 的 哪些 元 素 。 

那么 CSS 选择 器 的 作用 是 什么 呢 ? 使 用 CSS 选择 器 可 以 有 效 地 控制 HTML 标签 元 素 ， 可 以 
为 标签 元 素 定义 特定 的 风格 样式 ， 还 可 以 实现 各 种 动态 的 页 面 效 果 ， 等 等 。 总 之 ， 掌 握 CSS 选 
择 器 的 用 法 可 以 为 HTML 网 页 设计 带 来 更 多 的 选择 。 

本 章 主要 包括 以 下 内 容 : 


标签 选择 器 

类 别 选择 器 

ID 选择 器 
后 代 选 择 器 

子 选择 器 

伪 类 选择 器 

通用 选择 器 
群 组 选择 器 

相 邻 同胞 选择 器 
属性 选择 器 

伪 元 素 选择 器 
结构 性 伪 类 选择 器 
UI 元 素 状态 伪 类 选择 器 


了 .1 标签 选择 器 


CSS 标签 选择 器 实际 上 就 是 直接 对 HTML 标签 元 素 的 样式 定义 。 每 个 HTML 网 页 中 通常 由 
很 多 不 同 的 HTML 标签 元 素 组 成 ， 使 用 CSS 标签 选择 器 可 以 针对 每 一 种 标签 元 素 进行 单独 的 样 
式 定义 ， 这 样 当 修改 某 一 个 CSS 标签 选择 器 所 定义 的 样式 时 ， 就 会 整体 改变 页 面 中 该 标签 元 素 
的 风格 样式 。 

下 面 的 这 段 代码 (参见 源 代码 chapter07\ch07-css-selectortag html 文件 ) 是 使 用 标签 元 素 选 


择 器 的 应 用 。 
【示例 7-1】 CSS 选择 器 之 标签 选择 器 


构建 移动 网 站 与 APP: HTML 5+CSS 3+jQuery Mobile 入 门 与 实战 


在 这 段 代 码 中 ， 我 们 使 用 CSS 标签 选择 器 定义 了 一 系列 HTML 标签 元 素 的 风格 样式 。 下 面 
我 们 详细 介绍 : 

第 06 一 09 行 代码 使 用 CSS 标签 选择 器 为 body 标签 元 素 定 义 了 样式 ， 包 括 字 体系 列 (sans- 
serif) 和 字体 大 小 (20px); 

第 10 一 12 行 代码 使 用 CSS 标签 选择 器 为 nav 标签 元 素 定义 了 样式 ， 包 括 元 素 背景 色 为 灰色 
(gray); 

第 13 一 16 行 代码 使 用 CSS 标签 选择 器 为 div( 层 ) 标签 元 素 定义 了 样式 ， 包 括 字 体系 列 
(黑体 ) 和 字体 大 小 (16px); 

第 17 一 21 行 代码 使 用 CSS 标签 选择 器 为 p (段落 ) 标签 元 素 定义 了 样式 ， 包 括 字 体系 列 
(仿宋 )、 字 体 风格 (斜体 ) 和 字体 大 小 (14px); 

第 22 一 26 行 代码 使 用 CSS 标签 选择 器 为 footer (段落 ) 标签 元 素 定义 了 样式 ， 包 括 字 体 居 
中 显示 、 字 体 大 小 〈12px) 和 元 素 背 景色 为 浅 灰 色 (lightgray )。 

运行 测试 这 个 页 面 ， 效 果 如 图 7.1 所 示 。 


div 标 签 元素 选择 器 

pp 标 你 元 于 进攻 可 

div 标 签 元 素 选择 器 

foterFe 寺 | 


图 7.1 CSS 选择 器 之 标签 选择 器 
从 图 中 可 以 看 到 ，nav 标签 元 素 没 有 定义 字体 大 小 ， 所 以 其 字体 大 小 继承 自 父 元 素 body 标 
签 元 素 的 字体 大 小 (20px); div、p 标签 元 素 定义 了 各 自 的 字体 样式 ， 所 以 在 页 面 中 显示 的 字体 
是 不 同 的 ，footer 标签 元 素 定义 了 字体 居中 显示 ， 因 此 在 页 面 显示 中 该 元 素 是 唯一 一 个 具有 居中 
显示 风格 的 字体 ， 其 他 标签 元 素 的 字体 均 是 左 对 齐 显 示 。 
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了 .2 后 代 与 子 代 选 择 器 


本 节 我 们 引申 一 下 ， 介 绍 如 何 选 择 后 代 与 子 代 的 标签 元 素 。 下 面 的 这 段 代 码 (参见 源 代码 
chapter07\ch07-css-selector-tags.html 文件 ) 是 一 个 使 用 后 代 与 子 代 选择 器 的 应 用 。 


【示例 7-2】 CSS 选择 器 之 复合 标签 选择 器 


构建 移动 网 站 与 APP: HTML 5+CSS 3+jQuery Mobile 入 门 与 实战 


在 这 段 代 码 中 ， 我 们 使 用 复合 式 的 CSS 标签 选择 器 定义 了 一 系列 HTML 标签 元 素 的 风格 样 
式 。 下 面 我 们 详细 介绍 : 

第 13 一 16 行 代 码 使 用 逗号 分 隔 CSS 标签 选择 器 〈h3, h5) 定义 了 CSS 样式， 包括 字体 系列 

(Csans-serif) 和 字体 大 小 〈20px); 根据 CSS 规范 的 定义 ， 使 用 逗号 分 隔 的 CSS 标签 选择 器 是 并 
列 关系 ， 所 以 第 13 一 16 行 代码 定义 的 CSS 样式 对 h3、hs 的 作用 是 一 样 的 ; 

第 17 一 22 行 代码 使 用 空格 分 隔 的 后 代 选 择 器 〈div p) 定义 了 CSS 样式 ， 包 括 字 体 样式 和 背 
景 颜 色 ; 根据 CSS 规范 的 定义 ， 后 代 选 择 器 是 选择 某 元 素 的 后 代 元 素 的 选择 器 ， 所 以 第 17 一 22 
行 代码 定义 的 CSS 样式 指 对 div 标签 元 素 内 的 全 部 p 标签 元 素 起 作用 的 ; 

第 23 一 27 行 代码 使 用 大 于 号 “> ”分 隔 的 子 选 择 器 〈footer>p) 定义 了 CSS 样式， 包括 字体 
居中 、 字 体 样式 和 背景 颜色 ， 根据 CSS 规范 的 定义 ， 子 选择 器 是 选择 父子 关系 标签 元 素 中 子 元 
素 ， 所 以 第 23 一 27 行 代码 定义 的 CSS 样式 指 对 父 元 素 是 div 标签 元 素 的 p 标签 元 素 起 作用 的 。 

运行 测试 这 个 页 面 ， 效 果 如 图 7.2 所 示 。 


fiorBE ER 
umn 


7.2 CSS 选择 器 之 复合 标签 选择 器 


从 图 中 可 以 看 到 ， 第 38 一 41 行 代码 定 义 了 一 个 div 标签 元 素 ， 其 中 第 38 行 和 第 41 行 代码 
的 样式 与 第 39 一 40 行 代码 中 定义 的 p 标签 元 素 的 样式 是 不 一 样 的 ， 可 见 第 17 一 22 行 代码 定义 的 
样式 仅仅 是 针对 div 标签 元 素 内 的 全 部 p 标签 元 素 的 ; 同样， 第 44 一 50 行 代码 定义 了 一 个 footer 
标签 元 素 ， 其 中 第 45 行 和 第 49 行 代码 中 定义 的 p 标签 元 素 的 样式 与 第 47 行 代码 中 定义 的 p 标 
签 元 素 的 样式 是 不 一 样 的， 可 见 第 23 一 27 行 代码 定义 的 样式 仅仅 是 针对 父 元 素 是 footer 标签 元 
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素 的 全 部 p 标签 元 素 的 ， 第 47 行 代码 中 定义 的 p 标签 元 素 的 父 元 素 是 div 标签 元 素 ， 所 以 样式 
不 同 。 


了 .本 类别 选择 器 


CSS 类 别 选 择 器 实际 上 就 是 针对 具有 指定 类 〈class) 的 标签 元 素 的 样式 定义 。 每 个 HTML 
网 页 中 通常 需要 对 同一 HTML 标签 元 素 定义 不 同 的 样式 风格 ， 使 用 CSS 类 别 选择 器 就 可 以 实现 
不 同样 式 的 定义 ， 这 样 当 修 改革 一 个 CSS 类 别 选择 器 所 定义 的 样式 时 ， 就 会 改变 页 面 中 所 有 使 
用 该 类 标签 元 素 的 风格 样式 。 

下 面 的 这 段 代 码 〈 参 见 源 代码 chapter07\ch07-css-selector-class.html 文件 ) 是 使 用 类 别 选 择 器 
的 应 用 。 


【示例 7-3】 CSS 选择 器 之 类 别 选择 器 


2 


构建 移动 网 站 与 APP: HTML 5+CSS 3+jQuery Mobile 入 门 与 实战 


在 这 段 代码 中 ， 我 们 使 用 CSS 类 别 选 择 器 定义 了 一 系列 HTML 标签 元 素 的 风格 样式 。 下 面 
我 们 详细 介绍 : 

第 13 一 16 行 代码 使 用 CSS 标签 选择 器 为 div 标签 元 素 定义 了 样式 ， 包 括 字 体系 列 (黑体 ) 
和 字体 大 小 (16px); 

第 17 一 20 行 代码 使 用 CSS 类 别 选择 器 〈.divclass) 为 div 标签 元 素 定义 了 样式 ， 包 括 字 体系 
列 〈 仿 宋 ) 和 字体 大 小 (14px); 

第 36 行 和 第 40 行 代码 使 用 CSS 类 别 选 择 器 时 ， 在 div 标签 元 素 内 添加 了 class 属性 

(class="divclass")。 


运行 测试 这 个 页 面 ， 效 果 如 图 7.3 所 示 。 


div 标 答 共 别 迁 择 天 (classe"divelass") 


div 杖 答 匡 别 过 如 其 (class="divelass") 
div 标 签 类别 选择 器 


图 73 CSS 选择 器 之 类 别 选择 器 
从 图 中 可 以 看 到 ， 第 35 行 代码 定义 的 div 标签 元 素 没有 添加 类 别 ， 与 第 36 行 代码 定义 的 
div 标签 元 素 添加 类 别 〈class="divclass") 的 样式 是 不 一 样 的。 第 40 行 代码 定义 的 div 标签 元 素 
没有 添加 类 别 ， 即 使 该 元 素 包 含 在 第 38 一 41 行 代码 定义 的 div 标签 元 素 ( 使 用 class="divclass" 
类 别 ) 中 ， 其 仍 是 按照 没有 定义 类 别 的 样式 显示 的 。 


2 性 
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了 .4 id 选择 器 


CSS 的 id 选择 器 实际 上 就 是 针对 具有 指定 id 的 标签 元 素 的 样式 定义 。 每 个 HTML 网 页 中 通 
常 都 需要 为 每 一 个 HTML 标签 元 素 定义 一 个 特有 的 这 ， 使 用 CSS 的 id 选择 器 就 可 以 实现 对 单个 
标签 元 素 定义 样式 ， 这 样 当 修 改 某 一 个 CSS 的 id 选择 器 所 定义 的 样式 时 ， 就 会 单独 改变 页 面 中 


该 标签 元 素 的 风格 样式 。 
下 面 的 这 段 代码 (参见 源 代码 chapter07\ch07-css-selector-id.html 文件 ) 是 使 用 id 选择 


器 的 应 用 。 
【示例 7-4】 CSS 选择 器 之 id 选择 器 
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在 这 段 代码 中 ， 我 们 使 用 CSS 类 别 选择 器 定义 了 一 系列 HTML 标签 元 素 的 风格 样式 。 下 面 
我 们 详细 介绍 : 

第 13 一 16 行 代码 使 用 CSS 标签 选择 器 为 div 标签 元 素 定义 了 样式 ， 包 括 字体 系列 〈 黑 体 ) 
和 字体 大 小 (16px); 

第 17 一 20 行 代码 使 用 CSS 的 id 选择 器 (div#id-div) 为 div 标签 元 素 定义 了 样式 ， 包 括 字 体 
系列 (仿宋 ) 和 字体 大 小 (14px); 

第 21 一 24 行 代码 使 用 CSS 的 id 选择 器 (##d-p-class》 定 义 了 样式 ， 包 括 字 体系 列 〈 幼 圆 ) 
和 字体 大 小 (20px); 
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第 25 一 28 行 代码 使 用 CSS 的 id 选择 器 (div#id-p) 为 div 标签 元 素 定 义 了 样式 ， 包 括 字体 
系列 (黑体 ) 和 字体 大 小 (12px); 

第 29~33 行 代码 使 用 CSS 的 id 选择 器 (#d-footer) 定义 了 样式 ， 包 括 字 体 居中 、 字 体 大 
小 〈12px) 和 背景 颜色 。 

运行 测试 这 个 页 面 ， 效 果 如 图 7.4 所 示 。 从 图 中 可 以 看 到 ， 第 43 一 45 行 代码 定义 的 div 标 
签 元 素 没 有 定义 id 属性 ， 则 其 使 用 第 13 一 16 行 代码 定义 的 CSS 样式 ;第 47 一 49 行 代码 定义 的 
div 标签 元 素 定义 了 id 属性 〈"id-div")， 则 其 使 用 第 17 一 20 行 代码 定义 的 CSS 样式 ; 第 51 一 53 
行 代码 定义 的 p 标签 元 素 定义 了 id 属性 〈"id-p-class")， 则 其 使 用 第 21 一 24 行 代码 定义 的 CSS 
样式 ; 第 55 一 57 行 代码 定义 的 p 标签 元 素 定义 了 id 属性 〈"id-p")， 而 第 25 一 28 行 代码 定义 的 
CSS 样式 〈div#id-p) 是 作用 于 div 标签 元 素 的 ， 因 此 该 p 标签 元 素 无 法 使 用 第 25 一 28 行 代码 定 
义 的 CSS 样式 ， 而 是 继承 了 其 父 元 素 body 标签 元 素 所 定义 的 样式 。 


dd 


div 之 14 元 村 选 笃 可 (td= 1d-div) 


div 之 jd 元素 选择 器 (id="id-div") 


图 7.4 CSS 选择 器 之 id 选择 器 


了 .局 属性 选择 器 


CSS 属性 选择 器 实际 上 就 是 针对 具有 指定 属性 的 标签 元 素 的 样式 定义 。 设 计 网 页 时 ，HTML 
标签 元 素 可 以 定义 多 个 属性 ， 使 用 CSS 属性 选择 器 就 可 以 实现 对 定义 了 这 些 属 性 的 标签 元 素 进 
行 样式 定义 ， 这 样 当 修改 某 一 个 CSS 属性 选择 器 所 定义 的 样式 时 ， 就 会 改变 页 面 中 定义 有 该 属 
性 的 标签 元 素 的 风格 样式 。 

下 面 的 这 段 代码 (参见 源 代码 chapter07\ch07-css-selectorattribute.html 文件 ) 是 使 用 属性 选 
择 器 的 应 用 。 


【示例 7-5】 CSS 选择 器 之 属性 选择 器 
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第 7 章 ”CSS 选择 器 


在 这 段 代码 中 ， 我 们 使 用 CSS 属性 选择 器 定义 了 一 系列 HTML 标签 元 素 的 风格 样式 。 下 面 
我 们 详细 介绍 : 

第 13 一 16 行 代码 使 用 CSS 标签 选择 器 为 div 标签 元 素 定义 了 样式 ， 包 括 字体 系列 〈 宋 体 ) 
和 字体 大 小 (12px); 

第 17 一 20 行 代码 使 用 CSS 的 属性 选择 器 〈[id] ) 为 全 部 定义 了 id 属性 的 标签 元 素 定义 了 样 
式 ， 包 括 字体 系列 〈 黑 体 ) 和 字体 大 小 20px); 

第 21 一 24 行 代码 使 用 CSS 的 属性 选择 器 ([title] ) 为 全 部 定义 了 title 属性 的 标签 元 素 定义 了 
样式 ， 包 括 字 体系 列 〈 仿 宋 ) 和 字体 大 小 (14px); 

第 25 一 28 行 代码 使 用 CSS 的 属性 选择 器 (p[title=title] ) 为 全 部 定义 了 title 属性 且 属 性 值 为 
"title" 的 p 标签 元 素 定义 了 样式 ， 包 括 字 体系 列 ( 幼 圆 ) 和 字体 大 小 20px); 
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第 29 一 33 行 代码 使 用 CSS 的 属性 选择 器 (pltitle^="start"]) 为 全 部 定义 了 title 属性 且 属 性 
值 以 "start" 开 头 的 p 标签 元 素 定义 了 样式 ， 包 括 字 体系 列 〈 隶 书 )、 字 体 大 小 〈14px) 和 字体 左 对 
齐 ; 

第 34 一 38 行 代码 使 用 CSS 的 属性 选择 器 (p[title*="mid"]) 为 全 部 定义 了 title 属性 且 属 性 值 
中 包含 "mid" 字 符 串 的 p 标签 元 素 定义 了 样式 ， 包 括 字 体系 列 〈 隶 书 )、 字 体 大 小 〈14px) 和 字体 
居中 对 齐 ; 

第 39 一 43 行 代码 使 用 CSS 的 属性 选择 器 〈(p[title$="end"]) 为 全 部 定义 了 title 属性 且 属 
性 值 以 "end" 结 尾 的 p 标签 元 素 定义 了 样式 ， 包 括 字体 系列 〈 隶 书 )、 字 体 大 小 〈14px) 和 字 
体 右 对 齐 。 

运行 测试 这 个 页 面 ， 效 果 如 图 7.5 所 示 。 从 图 中 可 以 看 到 ， 第 59 行 代码 定义 的 文本 使 用 了 
第 13 一 16 行 代码 为 div 标签 元 素 所 定义 的 样式 ; 


TT TT 
CS 选择 器 之 属性 选择 器 
(CSS 选择 要 之 属性 选择 器 
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(CSS 迁 绽 加 之 项 丛 先 侠 民 
CssS 迁 年 到 之 书 性 进 笃 器 
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图 7.5 CSS 选择 器 之 属性 选择 器 


第 60 一 61 行 代码 定义 的 p 标签 元 素 均 定义 了 id 属性 ， 所 以 使 用 了 第 17 一 20 行 代码 定义 的 
CSS 样式 ; 

第 62 一 65 行 代码 定义 的 p 标签 元 素 均 定义 了 title 属性 ， 应 该 使 用 第 21 一 24 行 代码 定义 的 
CSS 样式 ， 但 第 64 一 65 行 代码 定义 的 p 标签 元 素 被 后 面 定义 的 样式 覆盖 了 ， 所 以 只 有 第 62 一 63 
行 代码 定义 的 p 标签 元 素 使 用 第 21 一 24 行 代 码 定义 的 CSS 样式 ; 

第 64 一 65 行 代码 定义 的 p 标签 元 素 定义 title 属性 时 也 赋予 了 属性 值 "title"， 所 以 使 用 了 第 
25 一 28 行 代码 定义 的 CSS 样式 ; 

第 66 一 67 行 代 码 定义 的 p 标签 元 素 定义 title 属性 时 也 赋予 了 以 "start" 开 头 的 属性 值 ， 所 以 
使 用 了 第 29 一 33 行 代码 定义 的 CSS 样式 ; 

第 68 一 69 行 代码 定义 的 p 标签 元 素 定义 title 属性 时 也 赋予 了 包含 "mid" 字 符 串 的 属性 值 ， 所 
以 使 用 了 第 34 一 38 行 代码 定义 的 CSS 样式 ; 
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第 70~71 行 代码 定义 的 p 标签 元 素 定义 title 属性 时 也 赋予 了 以 "end" 结 尾 的 属性 值 ， 所 以 使 
用 了 第 39 一 43 行 代码 定义 的 CSS 样式 。 


了 . O 伪 类 选择 器 


伪 类 是 CSS 规范 中 一 个 全 新 的 概念 ， 使 用 CSS 伪 类 可 以 实现 很 复杂 的 样式 效果 ， 而 CSS 伪 
类 分 为 好 几 种 表现 形式 ， 每 一 种 伪 类 选择 器 也 有 其 相应 的 使 用 方法 。 下 面 我 们 逐一 进行 介绍 。 


7.6.1 动态 伪 类 选择 器 


动态 伪 类 在 HTML 页 面 处 于 静态 时 并 不 显示 ， 只 有 当 用 户 与 页 面 进 行 交互 时 ， 才 会 产生 效 
果 。 辟 如 ;link、visited、hover 和 focus 这 些 都 属于 动态 伪 类 ， 而 动态 伪 类 选择 器 实际 上 就 是 针 
对 伪 类 所 定义 的 样式 。 

下 面 的 这 段 代码 (参见 源 代码 chapter07\ch07-css-selector-pseudoclass.html 文件 ) 是 使 用 动态 
伪 类 选择 器 的 应 用 。 


【示例 7-6】 CSS 选择 器 之 动态 伪 类 选择 器 
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在 这 段 代码 中 ， 我 们 使 用 了 CSS 动态 伪 类 选择 器 定义 了 一 组 输入 框 的 风格 样式 。 下 面 我 们 
详细 介绍 : 

第 17 一 19 行 代码 使 用 link 伪 类 选择 器 为 a 标签 元 素 定义 了 样式 ， 具 体 是 当 超 链接 未 访问 时 
字体 颜色 为 蓝 色 (blue); 

第 20 一 22 行 代码 使 用 visited 伪 类 选择 器 为 a 标签 元 素 定义 了 样式 ， 具 体 是 当 超 链接 被 访问 
时 字体 颜色 为 红色 (red); 

第 23 一 25 行 代码 使 用 hover 伪 类 选择 器 为 a 标签 元 素 定 义 了 样式 ， 具 体 是 当 鼠 标 移动 到 超 
链接 上 时 字体 颜色 为 绿色 (green)。 

运行 测试 这 个 页 面 ， 效 果 如 图 7.6 所 示 。 
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图 7.6 CSS 选择 器 之 动态 伪 类 选择 器 

下 面 我 们 再 看 一 个 使 用 focus 伪 类 的 例子 ， 这 段 代 码 〈 参 见 源 代 码 chapter07\ch07-css- 
selector-focus.html 文件 ) 是 使 用 focus 动态 伪 类 选择 器 的 应 用 。 

【示例 7-7】 ”CSS 选择 器 之 focus 选择 器 
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在 这 段 代码 中 ， 我 们 使 用 focus 动态 伪 类 选择 器 定义 了 一 组 输入 框 的 风格 样式 。 第 17 一 19 
行 代码 使 用 focus 伪 类 选择 器 为 input 标签 元 素 定义 了 样式 ， 具 体 是 当 输 入 框 获取 焦点 时 背景 颜 
色 为 红色 〈red)。 

运行 测试 这 个 页 面 ， 效 果 如 图 7.7 所 示 。 当 用 户 让 第 二 个 输入 框 获取 焦点 时 ， 输 入 框 的 背景 
颜色 变 为 红色 。 


rocus 反 器, [| 
CSS 记 拌 强 之 focus 计 择 器 


7.7 “CSS 选择 器 之 动态 伪 类 选择 器 


7.6.2 ”状态 伪 类 选择 器 


一 般 将 enabled 和 disabled 称 为 状态 伪 类 ， 这 些 伪 类 主要 针对 HTML 页 面 中 的 表单 元 素 进行 


操作 。 
下 面 的 这 段 代码 (参见 源 代码 chapter07\ch07-css-selector-able.html 文件 ) 是 使 用 状态 伪 类 选 


择 器 的 应 用 。 
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在 这 段 代码 中 ， 我 们 使 用 CSS 状态 伪 类 选择 器 定义 了 一 组 输入 框 的 风格 样式 。 下 面 我 们 详 
细 介 绍 : 
第 17 一 19 行 代 码 使 用 enabled 伪 类 选择 器 为 input 标签 元 素 定义 了 样式 
(input[type="text"]:enabled)， 具 体 是 当 输 入 框 为 可 输入 状态 时 背景 颜色 为 白色 (white); 
第 20 一 22 行 代码 使 用 disabled 伪 类 选择 器 为 input 标签 元 素 定义 了 样式 
(input[type="text"]:disabled)， 具 体 是 当 输 入 框 为 不 可 输入 状态 时 背景 颜色 为 灰色 (gray)。 
运行 测试 这 个 页 面 ， 效 果 如 图 7.8 所 示 。 


€ BP locslhost63342/html-cs-jquery [2 


图 7.8 CSS 选择 器 之 状态 伪 类 选择 器 


从 图 中 可 以 看 到 ， 在 代码 中 第 38 行 定义 的 input 标签 元 素 为 disabled 状态 ， 因 此 该 输入 框 将 
使 用 第 20 一 22 行 代码 定义 的 样式 ， 其 背景 颜色 变 为 灰色 。 


7.6.3 ” 伪 元 素 选择 器 


一 般 将 before 和 after 称 为 伪 元 素 ， 这 些 伪 元 素 主要 是 针对 HTML 页 面 中 的 标签 元 素 进行 操作 。 
下 面 的 这 段 代 码 (参见 源 代码 chapter07\ch07-css-selector-ele.html 文件 ) 是 使 用 伪 元 素 选择 
器 的 应 用 。 


【示例 7-9】 CSS 选择 器 之 伪 元 素 选择 器 
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在 这 段 代 码 中 ， 我 们 使 用 before 和 after 伪 元 素 选 择 器 为 div 和 p 标签 元 素 定义 了 一 组 风格 
样式 。 下 面 我 们 详细 介绍 : 
第 13 一 16 行 代 码 使 用 before 伪 元 素 选择 器 为 div 标签 元 素 定义 了 样式 〈div:before)， 其 中 为 
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content 属性 定义 了 属性 值 ("before div - "); 

第 17 一 20 行 代码 使 用 after 伪 元 素 选择 器 为 div 标签 元 素 定义 了 样式 (div:after)， 其 中 为 
content 属性 定义 了 属性 值 (" - div after"); 

第 21 一 24 行 代码 使 用 before 伪 元 素 选择 器 为 p 标签 元 素 定义 了 样式 〈p:before)， 其 中 为 
content 属性 定义 了 属性 值 ("before p- "); 

第 25 一 28 行 代码 使 用 before 伪 元 素 选择 器 为 div 标签 元 素 定义 了 样式 (piafter)， 其 中 为 
content 属性 定义 了 属性 值 ("-p after")。 

运行 测试 这 个 页 面 ， 效 果 如 图 7.9 所 示 。 


图 7.9 CSS 选择 器 之 伪 元 素 选择 器 


如 图 7.9 中 显示 ， 在 代码 中 第 38 一 42 行 定义 的 div 标签 元 素 将 使 用 第 13 一 16 行 代码 与 第 
17 一 20 行 代 码 定义 的 CSS 样式 ， 在 div 标签 元 素 的 前 后 均 插 入 了 content 属性 定义 的 文本 内 容 ; 
同 理 ， 第 39 一 41 行 定 义 的 p 标签 元 素 将 使 用 第 21 一 24 行 代码 与 第 25 一 28 行 代码 定义 的 CSS 样 
式 ， 在 p 标签 元 素 的 前 后 均 插 入 了 content 属性 定义 的 文本 内 容 。 


了 . /结构 性 伪 类 选择 器 


CSS 结构 性 伪 类 选择 器 可 以 针对 父 元 素 的 某 个 子 元 素 进行 样式 定义 。 璧 如， 如 果 打 算 单独 
指定 列表 的 第 一 项 或 最 后 一 项 的 样式 ， 可 以 使 用 first-child 或 last-child 伪 类 选择 器 进行 定义 。 

下 面 的 这 段 代 码 〈 参 见 源 代码 chapter07\ch07-css-selector-child.html 文件 ) 是 使 用 结构 性 伪 类 
选择 器 的 应 用 。 


【示例 7-10】 CSS 选择 器 之 结构 性 伪 类 选择 器 
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在 这 段 代 码 中 ， 我 们 使 用 CSS 的 first-child 和 last-child 选择 器 单独 定义 了 列表 元 素 的 风格 样 
式 。 下 面 我 们 详细 介绍 : 


构建 移动 网 站 与 APP: HTML 5+CSS 3+jQuery Mobile 入 门 与 实战 


第 13 一 16 行 代码 使 用 CSS 标签 选择 器 为 div 标签 元 素 定义 了 样式 ， 包 括 字体 系列 〈 黑 体 ) 
和 字体 大 小 (16px); 

第 17 一 19 行 代码 使 用 CSS 的 first-child 选择 器 (ul>li:first-child) 为 ul 标签 元 素 的 首 个 列表 
元 素 定义 了 背景 颜色 (lightgray ) 样式 ; 

第 20 一 23 行 代码 使 用 CSS 的 last-child 选择 器 (li:last-child) 为 最 后 一 项 列表 元 素 定义 了 样 
式 ， 包 括 字体 颜色 〈white) 和 背景 颜色 (black); 

第 34 一 40 行 代码 使 用 ul-li 标签 元 素 定义 了 一 组 列表 ， 共 包含 5 个 列表 项 。 

运行 测试 这 个 页 面 ， 效 果 如 图 7.10 所 示 。 


图 7.10 CSS 选择 器 之 结构 性 伪 类 选择 器 


从 图 7.10 中 可 以 看 到 ， 第 35 行 代 码 定义 的 在 标签 元 素 背 景色 使 用 了 第 17 一 19 行 代码 定义 
的 CSS 样式 ， 第 39 行 代码 定义 的 标签 元 素 的 字体 颜色 和 背景 色 使 用 了 第 20 一 23 行 代码 定义 
的 CSS 样式 。 


了 .号 nth 伪 类 选择 器 


在 CSS 规范 中 ， 可 以 使 用 nth 伪 类 选择 器 针对 父 元 素 的 某 类 子 元 素 进行 样式 定义 ，nth 伪 类 
选择 器 指 的 是 一 组 以 nth 开头 的 选择 器 ， 包 括 nth-child0、nth-lastchild0)、nth-of-type0 和 nth-last- 
of-type0 这 四 种 选择 器 。 辟 如， 如 果 打 算 单 独 指定 列表 中 3 的 倍数 列表 的 样式 ， 可 以 使 用 nth-of 
type(3n) 形 式 的 伪 类 选择 器 进行 样式 定义 。 

下 面 的 这 段 代码 (参见 源 代码 chapter07\ch07-css-selector-nth.html 文件 ) 是 使 用 nth 伪 类 选择 
器 的 应 用 。 


【示例 7-11】 CSS 选择 器 之 结构 性 伪 类 选择 器 
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在 这 段 代 码 中 ， 我 们 使 用 CSS 的 nth-childO0、nth-lastchild0、nth-oftype0 和 nth-last-of-type() 
这 四 种 选择 器 单独 定义 了 列表 元 素 的 风格 样式 。 下 面 我 们 详细 介绍 : 

第 13 一 16 行 代码 使 用 CSS 标签 选择 器 为 div 标签 元 素 定义 了 样式 ， 包 括 字 体系 列 (黑体 ) 
和 字体 大 小 (16px); 

第 17 一 21 行 代码 使 用 CSS 的 nth-child 伪 类 选择 器 (li:nth-child(1)) 为 ul 标签 元 素 的 第 一 个 
列表 元 素 定 义 了 CSS 样式 ， 包 括 字体 大 小 (font-size: x-large)、 字 体 颜色 (white) 和 背景 颜色 

(black); 

第 22 一 26 行 代码 使 用 CSS 的 nth-last-child 伪 类 选择 器 (li:nth-last-child(1)) 为 ul 标签 元 素 
的 最 后 一 个 列表 元 素 定 义 了 CSS 样式 ， 包 括 字 体 大 小 〈font-size: x-large)、 字 体 颜色 (white) 和 
背景 颜色 (darkgray); 

第 27 一 31 行 代码 使 用 CSS 的 nth-oftype 伪 类 选择 器 (li:nth-of-type(3n)) 为 列表 组 合 中 属 
于 3 的 倍数 Cn 从 数字 1 开始 计数 的 列表 元 素 定义 了 CSS 样式 ， 包 括 字 体 风 格 (font-style: 
italic)、 字 体 颜色 (white》 和 背景 颜色 (gray); 

第 32 一 35 行 代码 使 用 CSS 的 nth-last-oftype 伪 类 选择 器 〈li:nth-lastof-type(6)) 为 1i 列表 组 
合 中 倒数 第 6 个 列表 元 素 定 义 了 CSS 样式 ， 包 括 字 体重 量 (font-weight: bold) 和 背景 颜色 

(gray); 

第 46 一 57 行 代码 使 用 ul-li 标签 元 素 定义 了 一 组 列表 ， 共 包含 10 个 列表 项 。 

运行 测试 这 个 页 面 ， 效 果 如 图 7.11 所 示 。 从 图 中 可 以 看 到 ， 第 47 行 代码 定义 的 标签 元 素 
使 用 了 第 17 一 21 行 代码 定义 的 CSS 样式 ， 第 56 行 代码 定义 的 标签 元 素 使 用 了 第 22 一 26 行 代 
码 定义 的 CSS 样式 ; 第 49 行 、 第 52 行 和 第 55 行 代码 定义 的 二 标签 元 素 使 用 了 第 27~31 行 代 
码 定义 的 CSS 样式 ; 第 51 行 代码 定义 的 下 标签 元 素 使 用 了 第 32 一 35 行 代码 定义 的 CSS 样式 。 
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图 7.11 CSS 选择 器 之 nth 伪 类 选择 器 


了 . 品 ” 取 反 伪 类 选择 器 


CSS 规范 中 提供 了 一 个 非常 有 用 的 取 反 (not) 伪 类 选择 器 ， 可 以 针对 某 个 元 素 以 外 的 全 部 


元 素 进行 样式 定义 。 
下 面 的 这 段 代码 (参见 源 代码 chapter07\ch07-css-selector-not.html 文件 ) 是 使 用 取 反 (Cnot) 


伪 类 选择 器 的 应 用 。 
【示例 7-12】 CSS 选择 器 之 取 反 伪 类 选择 器 
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在 这 段 代码 中 ， 我 们 使 用 CSS 的 取 反 (not) 选择 器 为 p 标签 元 素 分 别 定义 了 风格 样式 。 
下 面 我 们 详细 介绍 : 

第 13 一 16 行 代码 使 用 CSS 标签 选择 器 为 div 标签 元 素 定义 了 样式 ， 包 括 字 体系 列 (黑体) 
和 字体 大 小 (16px); 

第 17 一 19 行 代码 为 p 标签 元 素 定 义 了 CSS 样式 类 (p.notclass)， 包 括 字 体 大 小 (font-size: 
14px); 

第 33 一 38 行 代码 使 用 p 标签 元 素 定义 了 一 组 段落 元 素 ， 其 中 第 34 行 、 第 36 行 和 第 38 行 代 
码 中 的 p 标签 元 素 增加 了 类 属性 〈class="notclass")。 

下 面 我 们 先 注销 第 20 一 22 行 代 码 ， 运 行 测试 这 个 页 面 ， 效 果 如 图 7.12 所 示 。 

从 图 7.12 中 可 以 看 到 ， 无 序 和 有 序 的 列表 均 使 用 了 【示例 7-12】 中 第 13 一 16 行 与 第 17 一 
19 行 代码 定义 的 样式 。 

第 20 一 22 行 代码 使 用 CSS 的 取 反 (not) 伪 类 选择 器 (p:not(class="notclass")) 为 全 部 p 标 
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签 元 素 中 除去 定义 样式 类 〈class="notclass") 的 元 素 定 义 了 新 的 CSS 样式 ， 包 括 字 体 大 小 〈font- 
Size: x-large )。 

运行 测试 这 个 页 面 ， 效 果 如 图 7.13 所 示 。 从 图 中 可 以 看 到 ,【 示 例 7-12】 中 第 33 行 、 第 35 
行 和 第 37 行 代码 中 的 p 标签 元 素 都 没有 定义 类 属性 〈class="notclass")， 因 此 使 用 了 第 20 一 22 行 
代码 定义 的 风格 样式 (font-size: x-large )。 


553 之 了 友和 xX 十 
€ 二 locahost63342/ 


CSS 泛 择 宫 之 取 反 (not) 人 类 渤 择 晴 
取 反 (not) 伪 类 选择 器 

取 反 (net) 伪 只 这 经 篇 

取 反 (not) 伪 类 选择 器 

职 反 (not) 伪 各 选择 品 

取 反 (not) 伪 类 选择 器 


取 反 nor){ 六 选择 器 
《CSS 选择 各 之 职 反 (not) 念 兴 远 择 器 


图 7.12 取 反 (not) 伪 类 选择 器 (一 ) 图 7.13 取 反 (not) 伪 类 选择 器 (二) 


7 .10 和 局 选择 器 


CSS 规范 中 还 提供 了 另 一 个 非常 有 用 的 全 局 (*) 选择 器 ， 可 以 针对 页 面 中 的 全 部 元 素 或 某 
个 标签 元 素 内 的 全 部 元 素 进行 样式 定义 。 

下 面 的 这 段 代 码 (参见 源 代码 chapter07\ch07-css-selector-all.html 文件 ) 是 使 用 全 局 (*) 选 
择 器 的 应 用 。 


【示例 7-13】 CSS 选择 器 之 全 局 (*) 选择 器 
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在 这 段 代码 中 ， 我 们 使 用 了 CSS 的 全 局 (*) 选择 器 对 页 面 中 的 元 素 分 别 定义 了 风格 样式 。 
下 面 我 们 详细 介绍 : 

第 06 一 09 行 代码 使 用 CSS 标签 选择 器 为 body 标签 元 素 定 义 了 样式 ， 包 括 字 体系 列 (sans- 
serif) 和 字体 大 小 (14px); 

下 面 我 们 先 注销 第 13 一 20 行 代码 ， 运 行 测试 这 个 页 面 ， 效 果 如 图 7.14 所 示 。 从 图 中 可 以 看 
到 ， 页 面 中 的 标签 元 素 均 使 用 了 第 06 一 09 行 代码 为 body 标签 元 素 定义 的 样式 。 

第 13 一 16 行 代码 使 用 CSS 的 全 局 (*) 选择 器 为 全 部 标签 元 素 定义 了 新 的 风格 样式 ， 包 括 
字体 系列 ("宋体 ") 和 字体 大 小 (16px)。 

下 面 我 们 接着 注销 第 17 一 20 行 代码 ， 运 行 测试 这 个 页 面 ， 效 果 如 图 7.15 所 示 。 从 图 中 可 以 
看 到 ， 页 面 中 的 标签 元 素 均 使 用 了 【示例 7-13】 中 第 13 一 16 行 代码 使 用 全 局 (*) 选择 器 定义 
的 样式 。 
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全 局 (* ) 选中 吕 
全 局 (* ) 造 吾 器 
全 局 (* ) 选号 器 


C55 渤 返 题 之 全 局 (* ) 选择 器 


图 7.14 全 局 (*) 选择 器 (一 ) 


全 局 (*) 选择 器 
全 局 (4] 选择 器 
全 局 (9) 选择 器 


(CSS 选择 器 之 全 局 (*) 选择 器 


图 7.15 全 局 (*) 选择 器 〈 二 ) 


第 7 章 CSS 选择 器 


第 17 一 20 行 代码 使 用 CSS 的 全 局 (*) 选择 器 为 div 标签 元 素 内 的 全 部 元 素 定义 了 新 的 风 


格 样式 ， 包 括 字 体系 列 〈" 黑 体 ") 和 字体 大 小 (20px); 


运行 测试 这 个 页 面 ， 效 果 如 图 7.16 所 示 。 从 图 中 可 以 看 到 ， 第 30~34 行 代码 定义 的 div 标 


全 局 (*) 选择 器 
全 局 (*) 选择 器 
全 局 (*) 选择 器 


CSS 选择 器 之 全 局 (*) 过 择 器 


图 7.16 全 局 (*) 选择 器 (三 ) 


7.11 4 团 


签 元 素 内 的 全 部 p 标签 元 素 均 使 用 了 第 17 一 20 行 代码 定义 的 风格 样式 ， 其 中 字体 系列 为 "黑体 
"、 字 体 大 小 为 20px。 


本 章 主要 介绍 了 定义 CSS 选择 器 的 使 用 方法 ， 包 括 标签 选择 器 、 类 别 选择 器 、id 选择 器 、 


属性 选择 器 、 伪 类 选择 器 、 取 反 〈not) 伪 类 选择 器 和 全 局 (*) 选择 器 等 的 相关 内 容 ， 希 望 这 些 
关于 CSS 选择 器 的 内 容 能 帮助 广大 读者 在 使 用 CSS 的 过 程 中 起 到 作用 。 
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第 8 章 
< 媒体 查询 


本 章 我 们 介绍 CSS 媒体 (@media) 查询 的 相关 内 容 。 对 于 这 个 新 名 词 读者 可 能 会 比较 陌 
生 ， 但 如 果 知 道 该 技术 可 以 实现 目前 最 流行 的 页 面 响应 式 布 局 ， 是 不 是 会 感到 很 激动 呢 ? 

设计 HTML 页 面 时 使 用 媒体 〈@media) 查询 技术 ， 可 以 针对 不 同 的 媒体 类 型 定义 不 同 的 样 
式 。 媒 体 (@media) 查询 技术 将 针对 不 同 硬件 的 屏幕 尺寸 设置 不 同 的 样式 ， 特 别 是 针对 目前 流 
行 的 响应 式 页 面 ， 媒 体 〈@media) 查询 技术 是 非常 有 用 的 。 在 实际 应 用 中 ， 用 户 在 改变 浏览 器 
大 小 尺寸 的 过 程 中 ， 响 应 式 布局 的 页 面 也 会 根据 浏览 器 的 宽度 和 高 度 重新 泻 染 页 面 。 
响应 式 布局 设计 可 根据 屏幕 或 浏览 器 的 大 小 尺寸 而 改变 ， 提 供给 用 户 的 最 佳 UI 体验 效果 。 
举 个 简单 的 例子 ， 假 设 设计 人 员 在 编写 相应 式 布局 的 网 页 代码 时 ， 设 计 了 一 个 20% 左 右 宽度 的 
右 侧 边栏 ， 其 在 桌面 显示 器 呈现 时 会 是 正常 的 ， 但 在 平板 电脑 的 小 屏幕 上 呈现 时 可 能 就 会 很 罕 ， 
如 果 再 到 手机 屏幕 可 能 就 是 不 可 用 的 一 条 框 。 可 见 ， 在 HTML 页 面 中 使 用 媒体 (@media) 查询 
技术 的 响应 式 布局 是 非常 灵活 的 ， 适 用 程度 也 是 很 高 的 。 

本 章 主要 包括 以 下 内 容 : 

@ ”响应 式 Web 设计 介绍 

@ ”媒体 查询 基本 语法 

@ 组织 和 使 用 媒体 查询 


响应 式 Web 设计 介绍 


响应 式 Web 设计 可 根据 屏幕 或 浏览 器 的 大 小 尺寸 设计 相应 的 布局 ， 通 过 媒体 (@media) 查 
询 技 术 编 写 CSS 样式 代码 ， 自 动 将 布局 设计 表现 为 不 同 屏幕 大 小 尺寸 的 最 佳 UI 用 户 体验 。 


8.1.1 流动 布局 


所 谓 流动 布局 本 质 上 是 一 种 适应 不 同 屏幕 尺寸 的 技术 ， 即 不 固定 div 层 的 宽度 ， 而 采用 百 分 
比 作为 单位 来 确定 每 一 层 的 宽度 。 流 动 布局 的 优势 是 通常 在 设计 完成 后 ， 可 以 自 适 应 各 种 不 同 设 
备 的 屏幕 尺寸 〈 辟 如: 桌面 显示 器 、 移 动 终端 、 平 面 Pad 等 设备 )。 

下 面 的 这 段 代 码 〈 参 见 源 代 码 chapter08\ch08-media-fluidlayout.html 文件 ) 是 一 个 使 用 流动 


8 章 媒体 查询 


布局 的 例子 。 
【示例 8-1】 DIV+CSS 流动 布局 


构建 移动 网 站 与 APP: HTML 5+CSS 3+jQuery Mobile 入 门 与 实战 时 


第 8 章 媒体 查询 


在 这 段 代码 中 ， 我 们 使 用 目前 比较 流行 的 DIV+CSS 方式 创建 了 一 个 HTML 网 页 。 下 面 我 
们 详细 介绍 : 

第 86 一 109 行 代码 使 用 div 标签 元 素 定义 了 一 个 容器 (id="div-main")， 其 中 包含 了 许多 小 
的 层 元 素 ， 这 些小 的 层 元 素 以 流动 布局 的 方式 构成 了 页 面 内 容 ; 例如 ， 第 87 一 89 行 代码 定义 的 
顶部 层 (div) 布局 (id="id-header")， 第 90 一 92 行 代码 定义 的 顶部 层 (div) 布局 (id="div- 
leftup")， 第 108 行 代码 定 义 的 底部 层 (div) 布局 (id="id-footer")， 等 等 ; 

为 了 实现 CSS 流动 布局 方式 ， 我 们 为 每 个 小 的 层 (div》 元 素 定义 了 唯一 的 id 值 ， 并 使 用 
CSS 样式 代码 进行 了 定义 ; 例如 ， 第 10 一 14 行 代 码 定 义 的 是 最 外 部 层 (div) 容器 (id="div- 
main") 的 样式 ， 第 23 一 30 行 代码 定义 的 是 左上 层 (div) 元 素 (id="div-leftup") 的 布局 样式 ， 
第 39 一 46 行 代码 定义 的 是 中 上 层 (div) 元 素 (id="div-content") 的 布局 样式 ， 等 等 ; 

同时 ， 每 一 个 小 的 层 div) 元 素 的 CSS 样式 代码 中 ， 都 使 用 float 属性 定义 了 左 对 齐 float: 
left;) 的 浮动 方式 ， 同 时 还 使 用 width 属性 和 height 属性 定义 了 宽度 和 高 度 ， 在 宽度 上 使 用 的 是 
百分比 形式 ， 在 高 度 上 使 用 的 固定 值 方式 ， 这 样 就 可 以 实现 层 〈div) 元 素 在 页 面 中 根据 宽度 占 
比 自动 排列 的 效果 。 

运行 测试 这 个 页 面 ， 效 果 如 图 8.1 所 示 。 


8.1 DIV+CSS 流动 布局 (一 ) 
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图 中 显示 ， 当 我 们 将 浏览 器 窗口 调整 到 合适 的 大 小 时 ， 第 87 一 108 行 代码 定义 的 若干 个 小 的 
层 (div) 布局 将 会 按照 一 排 三 个 进行 自动 排列 ， 而 当 我 们 继续 调整 浏览 器 窗口 ， 向 更 小 的 尺寸 
方向 调整 时 ， 由 于 窗口 的 宽度 和 高 度 均 变 小 ， 页 面 布局 将 会 改变 ， 效 果 如 图 8.2 所 示 。 第 87 一 
108 行 代码 定义 的 若干 个 小 的 层 〈div) 布局 将 会 按照 一 排 两 个 进行 自动 排列 ， 这 就 是 DIV+CSS 
流动 布局 方式 所 展现 的 页 面 效果 。 


图 82 DIV+CSS 流动 布局 (二 ) 


8.1.2 自 适应 图 片 


如 果 读 者 设计 过 网 页 图 片 ， 一 定 知道 图 片 的 尺寸 是 个 很 棘手 的 问题 ， 不 合适 的 图 片 尺 寸 会 将 
页 面 布局 弄 得 乱 七 八 糟 。 其 实 ， 在 网 页 上 显示 图 片 是 有 技巧 可 以 控制 的 ， 璧 如 自 适 应 图 片 就 是 比 
较 常用 的 方法 。 下 面 ， 我 们 列举 几 种 网 页 图 片 的 显示 方法 以 供 读者 了 解 。 

下 面 的 这 段 代码 (参见 源 代码 chapter08\ch08-media-pic-ori.html 文件 ) 是 一 个 显示 图 片 原始 
尺寸 的 例子 。 


【示例 8-2】 DIV+CSS 显示 原始 图 片 
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在 这 段 代码 中 ， 我 们 使 用 DIV+CSS 方式 显示 了 一 幅 原 始 图 片 。 下 面 我 们 详细 介绍 ; 

第 45 一 48 行 代码 使 用 div 标签 元 素 定义 了 一 个 容器 (id="id-img-ori")， 其 中 第 47 行 代码 使 
用 img 标签 元 素 定义 了 一 幅 图 片 ; 

第 32 一 35 行 代码 为 img 标签 元 素 定义 了 CSS 样式 ， 其 中 图 片 的 宽度 (width〉 和 高 度 
Cheight) 均 为 “auto”， 也 就 是 图 片 的 原始 尺寸 〈 原 图 尺寸 大 小 为 430pxX337px)。 

运行 测试 这 个 页 面 ， 效 果 如 图 8.3 所 示 。 原 图 尺寸 (450pxX337px) 已 经 超出 了 浏览 器 的 尺 
寸 大 小 ， 因 此 水 平方 向 与 垂直 方向 的 滚动 条 自动 出 现在 了 浏览 器 中 。 这 种 现实 效果 是 设计 人 员 比 
较 头 疼 的 ， 不 但 无 法 显示 出 图 片 全 貌 ， 还 会 影响 页 面 的 整齐 美观 。 


Pre 


名 本 localhost63342/html-css-jqu © » 三 
原始 图 片 A 
图 片 原始 尺寸 : 450px x 337px 


FE y 


pp 
夺 


图 8.3 ”DIV+CSS 显示 原始 图 片 


下 面 的 这 段 代 码 (参见 源 代码 chapter08\ch08-media-pic-div.html 文件 ) 是 一 个 显示 将 图 片 限 
定 在 层 (div) 中 的 例子 。 


【示例 8-3】 DIV+CSS 显示 DIV 图 片 
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在 这 段 代码 中 ， 我 们 使 用 DIV+CSS 方式 将 图 片 限 定 在 一 个 层 〈div) 标签 元 素 中 进行 显示 。 
下 面 我 们 详细 介绍 : 

第 49 一 52 行 代码 使 用 div 标签 元 素 定义 了 一 个 容器 (id="id-div-img")， 其 中 第 51 行 代码 使 
用 img 标签 元 素 定义 了 一 幅 图 片 ; 

第 32 一 35 行 代 码 为 第 49 一 52 行 代码 定义 的 层 (div) 容器 (id="id-div-img") 设计 了 CSS 样 
式 ， 其 中 宽度 (width) 为 固定 值 200px， 高 度 (height) 为 固定 值 150px; 读者 注意 ， 这 个 尺寸 
是 小 于 图 片 原始 尺寸 〈 原 图 尺寸 大 小 为 450pxX337px) 的 ; 

第 36 一 39 行 代码 为 第 51 行 代码 定义 的 img 标签 元 素 设计 了 CSS 样式 ， 其 中 图 片 的 宽度 
(width) 和 高 度 (height) 均 为 “100%”， 也 就 是 全 部 占据 层 (div) 容器 〈id="id-div-img") 的 
空间 。 

运行 测试 这 个 页 面 ， 效 果 如 图 8.4 所 示 。 原 图 尺寸 (450px X337px) 被 限定 在 层 (div) 容 
器 (200px X150px) 中 ， 也 就 是 图 片 被 压缩 显示 了 。 这 种 显示 效果 是 可 以 有 效 控制 图 片 显 示 尺 
十 的， 不 过 我 们 还 有 更 好 的 处 理 方法 。 


图 84 DIV+CSS 显示 DIV 图 片 


下 面 的 这 段 代 码 (参见 源 代码 chapter08\ch08-media-pic-selfadaption.html 文件 ) 是 一 个 显示 
自 适应 图 片 的 例子 。 


【示例 8-4】 DIV+CSS 显示 自 适应 图 片 
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在 这 段 代码 中 ， 我 们 使 用 DIV+CSS 方式 显示 了 一 幅 自 适 应 图 片 。 下 面 我 们 详细 介绍 : 
第 50~53 行 代码 使 用 div 标签 元 素 定 义 了 一 个 容器 (id="id-img-selfadaption")， 其 中 第 52 
行 代码 使 用 img 标签 元 素 定义 了 一 幅 图 片 ， 读 者 注意 ， 我 们 没有 为 该 容器 定义 大 小 尺寸 ; 

第 32 一 40 行 代码 为 第 51 行 代码 定义 的 img 标签 元 素 设计 了 CSS 样式 ， 其 中 图 片 的 宽度 
(width) 为 固定 值 150px， 高 度 (height)〉 为 固定 值 120px; 另外 ， 还 设置 了 图 片 的 最 大 宽度 
Cmax-width) 为 固定 值 150px， 最 大 高 度 (max-height) 均 为 固定 值 120px; 

本 例 最 关键 的 地 方 是 第 35 行 与 第 38 行 代码 使 用 expression 表达 式 定义 的 自 适应 图 片 尺寸 ; 

第 35 行 代码 定义 的 是 自 适应 宽度 ， 通 过 document.body.clientWidth 属性 (表示 窗 体 客户 端 宽 
度 ) 与 图 片 预 定义 宽度 (150px〉 进 行 比较 ， 如 果 大 于 则 取 150px， 和 否则 宽度 定义 为 “auto”;， 第 
38 行 代码 定义 的 是 自 适应 高 度 ， 通 过 document.body.clientHeight 属性 (表示 窗 体 客户 端 高 度 ) 
与 图 片 预 定义 宽度 120px〉 进 行 比较 ， 如 果 大 于 则 取 120px， 和 否则 宽度 定义 为 “auto”; 

运行 测试 这 个 页 面 ， 效 果 如 图 8.5 所 示 。 原 图 (450pxX337px) 经 过 自 适应 技术 处 理 后 ， 尺 
寸 大 小 被 调整 了 (150px X 120px)。 


8.5 ”DIV+CSS 显示 自 适应 图 片 


二 使 用 expression 表达 式 需 要 考虑 浏览 器 的 兼容 性 问题 。 
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8.1.3 ”媒体 查询 


媒体 (@media) 查询 是 实现 页 面 响应 式 布局 的 最 强大 的 一 种 方法 。 媒 体 (@media) 查询 通常 
包含 一 个 媒体 类 型 ， 以 及 该 媒体 类 型 的 宽度 、 高 度 和 颜色 等 媒体 属性 的 表达 式 。 在 CSS 3 中 加 入 媒 
体 〈@media) 查询 可 以 实现 定义 一 次 样式 ， 就 可 以 使 其 适用 于 各 种 不 同 媒体 类 型 的 功能 。 

下 面 的 这 段 代 码 〈 参 见 源 代码 chapter08\ch08-media-query.html 文件 ) 是 一 个 使 用 媒体 
(@media) 查询 的 简单 例子 。 


【示例 8-5】 媒体 〈@media) 查询 


构建 移动 网 站 与 APP: HTML 5+CSS 3+jQuery Mobile 入 门 9 


在 这 段 代码 中 ， 我 们 使 用 媒体 (@media〉 查 询 实现 了 当 浏 览 器 窗口 宽度 尺寸 小 于 等 于 
350px 时 ， 自 动 修改 背景 颜色 的 功能 。 下 面 我 们 详细 介绍 : 

第 46 一 48 行 代码 使 用 div 标签 元 素 定义 了 一 个 容器 (id="id-div-width")， 用 于 显示 当前 浏览 
器 窗口 宽度 值 ; 

第 21 一 26 行 代码 为 第 46 一 48 行 代码 定义 的 div 标签 元 素 设计 了 CSS 样式 ， 包 括 边 距 、 字 
体 大 小 和 居中 显示 ; 

第 50 一 53 行 的 脚本 代码 通过 window.innerWidth 属性 获取 当前 浏览 器 窗口 的 宽度 值 ， 并 显示 
在 第 46 一 48 行 代 码 定义 的 层 (div) 容器 (id="id-div-width") 之 中 ， 

本 例 最 关键 的 地 方 是 第 33 一 37 行 代码 使 用 媒体 (@media) 的 查询 功能 ， 当 浏览 器 窗口 宽度 
尺寸 小 于 等 于 350px (max-width:350px) 时 ， 背 景 颜色 自动 修改 为 灰色 (gray ); 关于 媒体 

(@media) 查询 的 语法 我 们 在 下 一 小 节 详细 介绍 。 

运行 测试 这 个 页 面 ， 效 果 如 图 8.6 所 示 。 当 我 们 调整 浏览 器 窗口 宽度 尺寸 值 为 351px 时 ， 背 

景 颜色 为 默认 的 白色 ; 再 继续 调整 浏览 器 窗口 宽度 尺寸 值 为 350px 时 ， 页 面 效果 如 图 8.7 所 示 。 
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专 态 oaalhost63342htim- De 为 三 € 和 localhost653421mbm- 
i 强 体 ( @@medR ) 理 疝 


当前 浏览 器 窗口 宽度 :351px 


舌 体 ( @medi ) 碍 而 
图 8.6 媒体 (@media) 查询 (一 ) 图 8.7 媒体 (@media) 查询 (二 ) 


8.7 中 显示 ， 当 浏览 器 窗口 宽度 尺寸 值 为 350px 时 ， 背 景 颜 色 修改 为 灰色 (gray)。 可 
见 ， 第 33 一 37 行 代 码 定义 的 媒体 〈@media) 查询 功能 按照 预定 设计 实现 了 。 


加. 2 媒体 查询 使 用 方法 


根据 CSS 规范 的 说 明 ， 从 CSS 2 版 本 开始 就 支持 媒体 查询 功能 了 ， 而 到 了 CSS 3 版 本 媒体 
查询 的 使 用 就 更 加 灵活 了 。 我 们 本 节 来 看 看 它们 的 不 同 。 


8.2.1 媒体 查询 基本 语法 


在 CSS 2 和 CSS 3 这 两 个 版 本 中 使 用 媒体 查询 的 方法 略 有 不 同 ， 通 常 在 CSS 2 版 本 中 需要 
将 媒体 查询 放置 于 HTML 文档 头 部 ， 并 使 用 link 标签 元 素 对 media 属性 加 以 引用 ， 类 似 于 下 面 
代码 的 形式 : 


而 在 CSS 3 版 本 中 ， 不 但 支持 上 面 的 写法 ， 还 可 以 使 用 下 面 这 种 更 加 灵活 的 写法 : 


上 面 的 代码 引用 自 【 示 例 8-5】)， 这 样 写 媒体 查询 代码 能 够 实现 更 复杂 的 功能 ， 可 阅读 性 也 
很 好 。 


249 


构建 移动 网 站 与 APP: HTML 5+CSS 3+jQuery Mobile 入 门 与 实战 


下 面 我 们 看 CSS 规范 中 ， 关 于 媒体 〈@media) 查询 的 语法 是 如 何 定义 的 : 


emedia mediatype andlnotlon1y (media feature) { 
Css-Code; 
} 


其 中 ，@media 关键 字 用 于 定义 媒体 查询 ，mediatype 关键 字 用 于 指定 媒体 类 型 ，andinotlonly 
表示 媒体 规则 ，media feature 用 于 指定 媒体 功能 。 
关于 媒体 类 型 ， 实 际 指 的 就 是 我 们 的 用 户 终端 设备 的 屏幕 ， 壁 如 桌面 显示 器 、 平 板 电 脑 、 手 
机 等 。 如 表 8-1 所 示 为 CSS 规范 中 关于 媒体 类 型 的 定义 。 
表 8-1 媒体 类 型 
No 属性 值 描述 
EE EE 
pm 


EE 
ee mi | 


关于 媒体 规则 (andlnotlonly)，and 指 的 是 “与 ”规则 ，not 指 的 是 “ 非 ” 规则 ，only 指 的 是 
“唯一 ”规则 。 

关于 媒体 功能 ， 是 指 设 定 诸如 屏幕 宽度 、 高 度 、 色 彩 等 属性 功能 。 如 表 8-2 所 示 为 CSS 规 
范 中 关于 媒体 功能 的 定义 。 


表 8-2 媒体 功能 


No 属性 值 描述 


5 device-height 定义 输出 设备 的 屏幕 可 见 高 度 

6 device-width 定义 输出 设备 的 屏幕 可 见 宽度 

用 来 查询 输出 设备 是 否 使 用 栅 格 或 点 阵 
定义 输出 设备 的 屏幕 可 见 宽度 与 高 度 的 最 大 比率 
定义 输出 设备 每 一 组 彩色 原件 的 最 大 个 数 
定义 在 输出 设备 的 彩色 查询 表 中 的 最 大 条 目 数 
定义 输出 设备 的 屏幕 可 见 宽度 与 高 度 的 最 大 比率 


3 color-index 


device-aspect-ratio 


9 max-aspect-ratio 


10 max-color 


11 max-color-index 


12 max-device-aspect-ratio 
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( 续 表 ) 
No 属性 值 描述 
13 max-device-height 定义 输出 设备 的 屏幕 可 见 的 最 大 高 度 
14 max-device-width 定义 输出 设备 的 屏幕 最 大 可 见 宽 度 
15 max-height 定义 输出 设备 中 的 页 面 最 大 可 见 区 域 高 度 
16 max-monochrome 定义 在 一 个 单 色 框架 缓冲 区 中 每 像素 包含 的 最 大 单 色 原 件 个 数 
17 max-resolution 定义 设备 的 最 大 分 辩 率 
| macvidn 
19 min-aspect-ratio 定义 输出 设备 中 的 页 面 可 见 区 域 宽度 与 高 度 的 最 小 比率 
20 min-color 定义 输出 设备 每 一 组 彩色 原件 的 最 小 个 数 
| mineoorindex 
22 | indevice aspecttio 


23 min-device-width 


24 min-device-height 
25 min-height 
26 min-monochrome 


27 min-resolution 


28 min-width 
29 monochrome 


30 orientation 


31 resolution 
EY 4 scan 
33 width 


8.2.2 使 用 媒体 查询 


定义 输出 设备 的 屏幕 的 最 小 可 见 高 度 
定义 输出 设备 中 的 页 面 最 小 可 见 区 域 高 度 
定义 在 一 个 单 色 框架 缓冲 区 中 每 像素 包含 的 单 色 原件 个 数 


这 一 小 节 我 们 介绍 使 用 媒体 〈@media) 查询 的 几 种 典型 用 法 ， 包 括 对 终端 设备 、 屏 幕 信 十 


等 属性 的 设 定 方法 。 


下 面 的 这 段 代 码 是 通过 媒体 〈@media) 查询 在 CSS 代码 中 设 定 支 持 媒体 类 型 的 例子 。 
【示例 8-6】 ” 设 定 支 持 媒体 类 型 


<link rel="stylesheet" type="text/css" href="screen.css" media="screen" /> 
<link rel="stylesheet" type="text/css" href="print.css" media="print" /> 


在 这 段 代 码 中 ， 我 们 根据 表 8-1 可 知 ，screen 代表 电脑 屏幕 、 平 板 电脑 、 智 能 手机 等 终端 设 


DN 
w 
bh 
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备 ，print 代表 打印 机 设备 因此， 在 使 用 电脑 屏幕 、 平 板 电脑 、 智 能 手机 等 终端 设备 时 ， 会 使 
用 screen.css 样式 表 ; 而 在 使 用 打印 机 终端 设备 时 ， 会 使 用 print css 样式 表 。 

下 面 的 这 段 代码 是 通过 媒体 〈@media) 查询 在 CSS 代码 中 设 定 不 同 屏 幕 尺 寸 使 用 不 同 CSS 
样式 的 例子 。 


【示例 8-7】 ” 设 定 支 持 屏幕 尺寸 


在 这 段 代码 中 ，screen 代表 电脑 屏幕 、 平 板 电脑 、 智 能 手机 等 终端 设备 ，max-width 代表 屏 
幕 最 大 宽度 ，min-width 代表 屏幕 最 小 宽度 ，max-device-width 代表 屏幕 最 大 可 见 宽度 。 另 外 ， 因 
为 市 场 上 流行 的 终端 设备 的 屏幕 尺寸 都 是 有 固定 值 的 ， 所 以 通过 设 定 不 同 的 屏幕 宽度 值 ， 就 可 以 
编写 适用 于 不 同 终端 设备 的 CSS 样式 代码 。 


号 .了 实战 : 响应 式 登录 页 面 


这 一 小 节 我 们 介绍 一 个 响应 式 登录 界面 的 实际 应 用 ， 该 应 用 综合 了 响应 式 布 局 、 媒 体 
(@media) 查询 和 Bootstrap 框架 技术 ， 可 以 让 读者 深入 体会 到 HTML5 + CSS 3 技术 的 强大 
功能 。 
首先 ， 我 们 为 这 个 应 用 命名 一 个 项 目 名 称 : html5-css-login， 先 看 项 目 目录 都 包含 哪些 代码 
文件 ， 如 图 8.8 所 示 。 
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图 8.8 html5-css-login 应 用 代码 目录 


从 图 8.8 中 可 以 看 到 ， 项 目 中 包括 一 个 页 面 文件 index.html， 一 个 CSS 样式 文件 
bootstrap.min.css。 其 中 ，bootstrap.min.css 样式 文件 引用 Bootstrap 框架 时 加 入 的 ， 主 要 用 于 页 面 
的 响应 式 布局 设计 。bootstrap.min.css 样式 文件 的 内 容 非 常 丰 富 ， 我 们 就 仅 对 本 应 用 使 用 到 的 功 
能 进行 介绍 。 

下 面 的 这 段 代码 (参见 源 代码 chapter08\html5-css-login\index.html 文件 ) 是 项 目的 页 面 
文件 。 


【示例 8-8】 ”html5-css-login 应 用 HTML 页 面 文件 
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15 </button> 
116 ……// 省 略 部 分 结束 符号 


在 这 段 代 码 中 ， 我 们 创建 了 一 个 响应 式 的 登录 页 面 。 下 面 我 们 详细 介绍 : 

第 85 一 122 行 代码 使 用 div 标签 元 素 定 义 了 一 个 容器 ， 并 为 该 元 素 添 加 了 类 属性 
(class="container"); 其 中 ，"container" 样 式 类 的 定义 在 第 13 一 29 行 代码 中 ， 包 括 宽度 、 高 度 、 
位 置 、 边 距 和 背景 色 等 样式 属性 ， 在 定义 背景 色 时 还 考虑 到 浏览 器 的 兼容 性 问题 ; 

第 86 一 121 行 代码 使 用 div 标签 元 素 定义 了 一 个 登录 容器 ， 并 为 该 元 素 添 加 了 类 属性 
(class="login-div"); 其 中 ，"login-div" 样 式 类 的 定义 在 第 30 一 38 行 代码 与 第 39 一 45 行 代 码 中 ; 

第 30 一 38 行 代码 为 第 86 一 121 行 代码 定义 的 登录 容器 设 定 了 宽度 (width: 100%;)、 最 大 宽 
度 (max-width: 500px;)、 高 度 (height: 350px;)、 绝 对 定位 position: absolute;)、 顶 部 位 置 (top: 
50%;) 和 上 部 边 距 (margin-top: -175px;〉 等 样式 属性 ， 将 上 部 边 距 定义 为 负 值 (-175px) 表示 为 
登录 容器 高 度 350px) 的 一 半 ; 

第 39 一 45 行 代 码 使 用 媒体 〈@media) 查询 技术 为 第 86 一 121 行 代码 定义 的 登录 容器 增加 了 
适应 不 同 浏览 器 窗口 尺寸 的 功能 ， 当 浏览 器 窗口 宽度 小 于 等 于 500px 时 ， 将 重新 设 定 左 侧 位 置 

(left 50%;) 和 左 侧 边 距 (margin-left -250px;)， 将 左 侧 边 距 定义 为 负 值 (-250px) 表示 为 登录 
容器 宽度 (500px) 的 一 半 ; 

第 87 一 89 行 代码 使 用 div 标签 元 素 定 义 了 一 个 登录 标题 层 ， 并 为 该 元 素 添 加 了 类 属性 
(class="login-title" ); 其 中 ，"login-title" 样 式 类 的 定义 在 第 70 一 73 行 代码 中 ， 包 括 内 边 距 和 背景 
色 样 式 属性 ; 

第 90 一 120 行 代码 使 用 div 标签 元 素 定 义 了 一 个 登录 内 容 层 ， 并 为 该 元 素 添加 了 类 属性 
(class="login-content"); 其 中 ，"login-content" 样 式 类 的 定义 在 第 46 一 52 行 代码 中 ， 包 括 宽度 
(width: 100%;)、 最 大 宽度 (max-width: 500px; )、 高 度 (height 250px;)、 背 景色 和 浮动 位 置 
(float: left; ) 等 样式 属性 ; 

第 91 一 119 行 代 码 使 用 div 标签 元 素 定 义 了 一 个 登录 表单 层 ， 并 为 该 元 素 添 加 了 类 属性 
(class="login-form"); 其 中 ，"login-form" 样 式 类 的 定义 在 第 53 一 59 行 代码 中 ， 包 括 宽度 width: 
100%;)、 最 大 宽度 (max-width: 400px:)、 高 度 〈height 200px;)、 外 边 距 和 上 部 内 边 距 等 样式 属性 ; 

第 92 一 118 行 代码 使 用 form 标签 元 素 定义 了 一 个 登录 表单 ， 并 为 该 元 素 定义 了 登录 方式 
(method="post" ); 

第 93 一 101 行 代码 使 用 div 标签 元 素 定义 了 一 个 登录 用 户 名 层 ， 第 102 一 110 行 代码 使 用 div 
标签 元 素 定 义 了 一 个 登录 密码 层 ， 第 111 一 117 行 代码 使 用 div 标签 元 素 定 义 了 一 个 登录 提交 
层 ， 并 为 该 三 个 元 素 添加 了 相同 的 类 属性 〈class="form-group"); 其 中 ，"form-group" 样 式 类 的 定 
义 在 第 67 一 69 行 代码 中 ， 包 括 底部 外 边 距 样式 属性 ， 注 意 此 处 使 用 “!important” 关 键 字 设 定 了 
样式 的 优先 级 为 最 高 

第 94 一 100 行 代码 与 第 103 一 109 行 代码 使 用 div 标签 元 素 分 别 定义 了 一 个 样式 层 ， 并 为 该 
两 个 元 素 添加 了 相同 的 类 属性 (class="col-xs-12"); 注意 该 属性 是 由 Bootstrap 框架 提供 的 ， 用 于 
设 定 控件 的 栅 格 数 ，“col-xs-XX” 系 列 适用 于 小 屏幕 设备 ， 此 处 “XX 值 定义 为 12” 代 表 最 大 栅 
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格 数 ， 既 登录 用 户 名 层 与 登录 密码 层 均 占据 最 大 栅 格 数 的 宽度 ; 

第 95 一 99 行 代码 与 第 104 一 108 行 代码 使 用 div 标签 元 素 分 别 定义 了 一 个 输入 框 组 合 样式 
层 ， 并 为 该 两 个 元 素 添加 了 相同 的 类 属性 〈class="input-group"); 其 中 ，"input-group" 样 式 类 的 定 
义 在 第 60 一 66 行 代码 中 ， 包 括 高 度 和 外 边 距 样式 属性 ， 注 意 此 处 使 用 “!important” 关 键 字 设 定 
了 样式 的 优先 级 为 最 高 ; 

第 96 行 代码 与 第 105 行 代码 使 用 span 标签 元 素 分 别 定义 了 一 个 行内 区 域 ， 用 于 显示 文 
字 提 示 ; 

第 97 一 98 行 代码 与 第 106 一 107 行 代码 分 别 使 用 input 标签 元 素 分 别 定义 了 一 个 输入 框 ， 并 
为 该 两 个 元 素 添加 了 相同 的 类 属性 〈class="form-control"); 其 中 ，"form-control" 样 式 类 的 定义 在 
第 63 一 66 行 代码 中 ， 包 括 高 度 样式 属性 ; 

第 112 一 116 行 代码 使 用 div 标签 元 素 定义 了 一 个 样式 层 ， 并 为 该 元 素 添加 了 类 属性 

(class="col-xs-4 col-xs-offset-4"); 注意 该 属性 是 由 Bootstrap 框架 提供 的 ， 用 于 设 定 控件 的 栅 格 

数 与 位 移 , “col-xs-offsetr4” 表 示 向 右 侧 位 移 4 个 栅 格 数 ,“col-xs-4” 代 表 占 用 4 个 栅 格 数 ， 即 
提交 控件 占据 栅 格 数 的 宽度 ; 

第 113 一 115 行 代码 使 用 button 标签 元 素 定义 了 一 个 提交 控件 ， 并 为 该 元 素 添加 了 类 属性 

(class="btn btn-sm btn-info"); 其 中 ，"btn-sm" 样 式 类 的 定义 在 第 77 一 80 行 代 码 中 ， 包 括 内 边 距 

和 字体 大 小 样式 属性 ， 而 "btmn" 与 "btn-info" 样 式 类 则 由 Bootstrap 框架 提供 。 

运行 测试 这 个 页 面 ， 效 果 如 图 8.9 所 示 。 下 面 我 们 将 浏览 器 窗口 大 小 向 大 的 方向 拉 伸 一 下 ， 
运行 测试 这 个 页 面 ， 效 果 如 图 8.10 所 示 。 从 图 中 可 以 看 到 ， 登 录 界面 随 着 浏览 器 窗口 大 小 的 调 
整 ， 也 进行 了 调整 ， 其 宽度 与 高 度 尺 寸 保持 不 变 、 界 面 定 位 基本 居于 窗口 中 间 位 置 ， 这 就 是 响应 
式 布局 的 效果 ， 保 证 了 界面 的 美观 。 


图 8.9 ”响应 式 登录 页 面 (一 ) 图 8.10 ”响应 式 登录 页 面 (二 ) 
下 面 我 们 再 将 浏览 器 的 窗口 大 小 向 小 的 方向 收缩 一 下 ， 运 行 测试 这 个 页 面 ， 效 果 如 图 8.11 
所 示 。 从 图 中 可 以 看 到 ， 当 浏览 器 窗口 宽度 小 于 500px 数值 时 ， 登 录 界 面 定位 根据 【示例 8-8】 
中 第 39 一 45 行 代码 定义 的 媒体 〈@media) 查询 技术 重新 进行 了 计算 ， 即 使 因为 浏览 器 窗口 尺寸 
小 于 登录 界面 尺寸 、 导 致 浏览 器 出 现 了 滚动 条 ， 但 用 户 名 与 密码 输入 框 、 登 录 控 件 按钮 也 均 能 够 
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满足 操作 功能 ， 这 就 是 响应 式 界面 的 强大 之 处 。 


€ 古 localhost63342/html 


= 


图 8.11 ”响应 式 登录 页 面 (三 ) 


号 .4 小 结 


本 章 主要 介绍 了 媒体 (@media) 查询 的 使 用 方法 ， 包 括 页 面 响应 式 布局 、 流 动 布局 、 媒 体 
查询 等 方便 的 相关 内 容 ， 并 具体 实现 了 一 个 基于 HTML 5 + CSS 的 响应 式 登 录 页 面 以 帮助 读者 加 
深 了 解 。 希 望 这 些 关于 媒体 〈@media) 查询 的 相关 内 容 能 给 广大 读者 带 来 帮助 。 
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本 章 我 们 介绍 一 个 基于 HTML 5 + CSS 3 综合 技术 实现 的 内 容 管 理 系统 应 用 。HTML 5 + 
CSS 3 技术 近 些 年 来 发 展 势 头 十 分 迅猛 ， 基 于 HTML 5 + CSS 3 综合 技术 实现 的 Web 应 用 功能 越 
来 越 强大 、 性 能 也 越 来 越 高 效 。 直 接 在 HTML 5 页 面 中 加 入 音频 与 视频 、 图 像 与 动画 已 经 不 再 
是 新 技术 ， 而 诸如 离线 缓存 、Web 存储 、Web SQL Database、 文 件 存储 API 等 以 往 不 敢 想象 的 功 
能 ， 在 HTML 5 平台 下 也 已 成 为 标准 。 可 以 想象 ，HTML 5 + CSS 3 技术 将 会 把 移动 互联 网 推 到 

-个 全 新 的 高 度 ， 也 势必 带 给 众多 的 移动 互联 网 用 户 更 多 的 福 社 。 

本 章 将 介绍 给 读者 的 内 容 管理 系统 应 用 就 是 基于 HTML 5 + CSS 3 综合 技术 实现 的 。 该 应 用 
综合 了 离线 的 HTML、JS 和 CSS 技术 、Web 存储 技术 和 前 端 交互 技术 ， 通 过 将 离线 资源 缓存 、 
数据 本 地 存储 、 用 户 前 端 操作 ， 在 HTML 5 平台 下 实现 了 一 个 传统 意义 下 的 Web 内 容 管理 系 
统 ， 相 信 会 在 Web 应 用 开发 方面 带 给 读者 一 个 全 新 的 技术 视角 与 开发 体验 。 

本 章 主 要 包括 以 下 内 容 : 

@ HTML5+CSS3 综合 技术 
可 离线 的 HTML、JS 和 CSS 资源 缓存 
Web 存储 技术 
前 端 交互 技术 


内 容 管理 系统 概述 


本 章 介绍 的 基于 HTML 5 + CSS 3 技术 实现 的 内 容 管理 系统 应 用 ， 是 一 个 完全 意义 上 的 前 端 
Web 应 用 。 整 个 Web 应 用 全 部 采用 HTML、CSS 和 JavaScript 技术 实现 ， 也 正 因为 如 此 我 们 称 
其 为 轻 量 级 内 容 管理 系统 。 

从 传统 意义 来 讲 ， 一 个 完整 的 Web 内 容 管理 系统 在 架构 上 一 般 包 括 前 端 界面 模块 、 中 间 逻 
辑 控 制 模块 和 后 端 数 据 模块 ， 这 也 就 是 著名 的 MVC 〈 模 型 、 视 图 和 控制 器 ) 三 层 架 构 理论 。 传 
统 基于 MVC 架构 的 Web 应 用 ， 仅 仅 依靠 客户 端 HTML 语言 来 实现 是 完全 不 可 能 的 ， 其 至 少 需 
要 一 种 服务 器 端 语言 〈 璧 如 : PHP、JSP、ASP 等 ) 来 完成 后 台 操作 。 当 然 ， 更 高 级 一 点 Web 应 
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用 还 会 用 到 框架 技术 〈 壁 如: Spring、Hibernate、Stmts 等 ) 来 构建 ， 这 些 都 是 题 外 话 了 。 而 本 
章 实现 的 轻 量 级 内 容 管 理 系统 将 据 弃 传统 的 MVC 架构 模式 ， 将 逻辑 控制 功能 和 后 端 数据 存储 模 
块 功能 也 放 在 前 端 来 完成 ， 这 完全 是 靠 HTML 5 提供 的 新 特性 来 实现 的 ， 也 是 所 谓 “ 轻 量 级 ” 
真正 的 含义 所 在 。 

一 个 完整 的 内 容 管理 系统 包含 的 内 容 有 很 多 方面 ， 限 于 篇 幅 限 制 本 应 用 就 示范 性 地 实现 一 个 
用 户 信息 管理 模块 。 见 斑 窥 豹 ， 读 者 理解 了 一 个 模块 的 实现 方法 ， 再 引申 扩展 其 他 功能 模块 就 容 
易 得 多 了 。 如 图 9.1 所 示 为 是 本 内 容 管理 系统 应 用 的 功能 模块 详解 。 


( HTML5 + CSS3 轻 量 级 内 容 管理 系统 | 


图 9.1 功能 模块 详解 


图 9.1 显示 ， 本 应 用 首先 设计 了 一 个 登录 模块 ， 通 过 一 个 登录 验证 模块 与 HTML 5 本 地 存储 
中 的 用 户 权限 进行 交互 ， 来 完成 用 户 验 证 操作 ， 如 果 是 新 用 户 ， 在 登录 界面 可 以 链接 到 新 用 户 注 
册 模 块 来 添加 新 用 户 ， 注 意 在 新 用 户 注册 模块 仅仅 可 以 得 到 普通 管理 权限 ， 如 果 用 户 身 份 验证 通 
过 ， 则 跳 转 到 用 户 信息 管理 模块 ， 也 就 是 本 应 用 的 主 界面 ， 用 户 信息 管理 模块 会 根据 不 同 的 用 户 
权限 选择 进入 不 同 的 子 功能 模块 ， 分 别 实现 了 用 户 信息 浏览 和 用 户 信息 管理 〈 新 增 、 编 辑 和 删除 
操作 ) 等 功能 ， 注 意 只 有 高 级 别 的 管理 权限 才 可 以 进行 用 户 管理 操作 ， 整 个 操作 均 需 与 HTML 5 
本 地 存储 进行 交互 来 完成 ， 另外， 本 应 用 还 设计 了 一 个 简单 错误 页 ， 用 于 定向 非法 操作 。 

本 应 用 全 部 前 端 用 户 界面 使 用 HTML 5 + CSS 3 语言 设计 ， 功 能 逻辑 操作 使 用 JavaScript 脚 
本 语言 设计 ， 数 据 存储 功能 使 用 HTML 5 本 地 存储 〈localStorage) 设计 。 其 中 ，CSS 部 分 应 用 
到 了 最 流行 的 Bootstrap 框架 ， 脚 本 语言 部 分 也 使 用 到 了 最 流行 的 jQuery 框架 ， 另 外 还 增加 了 
HTML 5 离线 缓存 功能 。 可 以 讲 ， 本 应 用 集成 了 HTML 5 绝 大 部 分 的 新 特性 。 


日. HTML、css 和 JS 等 资源 的 离线 缓存 


在 第 4 章 中 ， 我 们 向 读者 介绍 了 HTML 离线 缓存 的 内 容 ， 也 列举 了 使 用 离线 缓存 的 一 些 优 
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点 。 为 了 给 读者 更 直接 的 体会 ， 在 本 应 用 中 我 们 也 将 HTML 离线 缓存 功能 应 用 其 中 。 

所 谓 离线 缓存 就 是 将 HTML、CSS 和 JS 等 资源 存储 在 本 地 ， 方 便 用 户 再 次 访问 时 直接 在 本 
地 读 取 ， 提 高 使 用 效率 。 下 面 我 们 先 了 解 本 应 用 的 文件 结构 ， 如 图 9.2 所 示 。 

图 中 显示 ， 整 个 文件 结构 比较 清晰 ， 应 用 根 目 录 下 包含 若干 HTML 文档 和 一 个 manifest 离 
线 缓存 文件 (名称: ch09.appcache )， 同 时 ， 还 包括 若干 子 目录 用 于 分 类 放置 CSS 样式 文件 、JS 
脚本 文件 、 图 片 文 件 和 字体 文件 等 。 下 面 我 们 具体 看 一 下 ch09.appcache 离线 缓存 文件 中 的 内 
容 ， 该 文件 定义 了 全 部 需要 离线 缓存 的 文件 结构 ， 具 体 如 图 9.3 所 示 。 


目 chogappcache x | 
1 CACHE MAJTFEST 
2 #2016-01-08 v1.0.1 
3 js/bootstrap. js 
4 js/bootstrap. min js 
5 js/DT_bootstrap. js 
6 js/html5shiv. js 
js/response. nin js 
8 js/admin js 
9 js/main js 
a r0 10 js/login. js 
| 
> Dess 12 | js/tour.js 
» Dfonts 13 md5/jquery. js 
» Dimages 14 md5/jauery. md5. js 
» Djs 15 ess/bootstrap. css 
16 ess/bootstrap.min. css 
"Emas 17 login html 
p> Dvendors 18 ai Re 
国 404.html 19 adnin html 
国 abouthtml 20 tour. html 
国 admin.html 21 eg htnl 
日 ch09.appcache 22 about. html 
23 4o4.htnl| 
国 loginihtml es er 
国 main.html 25 党 
国 reg.html 26 FALLBACK: 
@ tourhtml 27 / /404. htnl 
9.2 HTML 5 +CSS 3 内 容 管理 系统 文件 结构 图 9.3 ”manifest 离线 缓存 文件 
图 中 显示 ， 一 个 manifest 离线 缓存 文件 所 需要 的 基本 元 素 全 部 体现 在 其 中 了 。 下 面 我 们 详细 
介绍 一 下 该 文件 : 


第 1 行 代码 通过 “CACHE MANIFEST” 关 键 字 来 定义 全 部 在 首次 下 载 后 需要 缓存 的 文件 。 
注意 ， 在 manifest 离线 缓存 文件 中 “CACHE MANIFEST” 关 键 字 是 必需 的 ， 其 下 面 所 列 出 的 全 
部 文件 都 会 进行 缓存 。 

第 3 一 23 行 代码 列举 了 项 目 中 的 缓存 文件 ， 包 括 “js” 子 目录 下 的 Bootstrap 框架 脚本 文件 ， 

“md5” 子 目录 下 的 加 密 脚本 文件 ，“css” 子 目录 下 的 Bootstrap 框架 样式 文件 ， 还 有 根 目 录 下 的 
HTML 页 面 文件 。 
第 24 行 代码 通过 “NETWORK” 关 键 字 来 定义 必须 要 到 服务 器 端 访问 的 文件 ， 这 些 文件 是 
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永远 不 会 被 缓存 的 。 如 果 “NETWORK ”关键 字 下 面 使 用 了 一 个 “* ”符号 〈 如 第 19 行 代码 )， 
则 表示 除了 “CACHE MANIFEST” 关 键 字 下 面 的 文件 ， 其 他 文件 资源 全 部 需要 连接 服务 器 进行 
访问 。 

第 26 行 代码 通过 “FALLBACK” 关 键 字 来 定义 如 果 访 问 文件 错误 ， 则 使 用 哪些 文件 进 
行 代 蔡 。 

例如 ， 第 27 行 代码 的 含义 就 是 ， 如 果 访 问 项 目 根 目录 下 的 任何 文件 发 生 错 误 ， 则 用 
404.html 文件 进行 替代 。 

以 上 就 是 将 HTML、CSS 和 JS 等 资源 进行 离线 缓存 的 操作 方法 ， 下 面 我 们 继续 介绍 本 应 用 
的 各 个 功能 模块 。 


日 .了 数据 储存 结构 


本 系统 使 用 了 HTML 5 的 本 地 储存 〈localStorage) 用 来 保存 用 户 信息 ， 使 用 localStorage 的 
优势 在 于 可 以 在 本 地 将 用 户 数据 持久 化 ， 即 使 浏览 器 被 关闭 数据 信息 也 存在 。 

我 们 在 设计 系统 时 考虑 到 主要 是 突出 演示 功能 ， 因 此 用 户 信 息 的 数据 结构 与 常规 内 容 管理 系 
统 相 比 ， 结 构 进 行 了 大 大 的 简化 ， 仅 仅 保留 了 实现 系统 功能 必须 用 到 的 键 值 信息 。 用 户 信息 的 详 
细 数 据 结构 如 下 : 

@ id (唯一 标识 ) : 用 于 标识 唯一 键 值 ; 
用 户 id (userid ) : 用 户 唯一 id; 
密码 (pwd ) : 为 明码 ， 用 于 演示 作用 ; 
md5 加 密 密 码 (pwdmd5 ) : 将 明码 经 过 md5 加 密 后 的 密码 ; 
用 户 名 (name ) : 用 户 名 称 ; 
用 户 角 色 等 级 (level) : 分 为 系统 管理 员 admin、 系 统 用 户 user 和 游客 guest 三 级 ; 
用 户 权 限 (reserved ) : 用 整数 1、2、3 进行 标识 ， 其 中 系统 管理 员 admin 为 1、 系 统 
用 户 user 为 2、 游客 guest 为 3。 


在 使 用 HTML 5 的 本 地 存储 〈localStorage) 进行 数据 操作 时 ， 可 以 参考 下 面 的 代码 。 
【示例 9-1】 本 地 存储 〈localStorage) 初始 化 


262 


这 段 代 码 先 定义 了 一 个 数据 结构 ， 然 后 依次 为 每 一 个 数据 项 进行 了 初始 化 赋值 ， 最 后 使 用 
localStorage.setltem0 函数 方法 在 本 地 存储 中 增加 键 值 对 ( {key， value} )。 其 中 ， 
localStorage.setltem() 函 数 方法 包含 两 个 参数 ， 第 一 个 参数 为 键 key， 第 二 个 参数 为 数值 value。 

本 地 存储 〈localStorage) 除了 setItem() 函 数 方法 ， 还 包括 getltem() 函 数 方法 和 removeltem() 
函数 方法 ，setItem() 函 数 方法 用 于 存储 键 值 对 ，getltem() 函 数 方 法 用 于 获取 键 值 对 ，removeltem0 
函数 方法 用 于 移 除 键 值 对 ， 另 外 ， 还 有 clear0 函 数 方法 用 于 清除 全 部 存储 信息 。 这 些 方法 我 们 在 
本 章 后 面 的 内 容 中 ， 会 陆续 向 读者 介绍 到 。 


日 .A 登录 哈 证 模块 


正如 图 9.1 中 描述 的 ， 该 内 容 管理 系统 最 先 呈 现 给 用 户 的 是 一 个 登录 界面 。 在 登录 界面 中 ， 
需要 用 户 在 输入 用 户 名 、 密 码 后 ， 方 可 提交 进入 系统 主页 ， 同 时 登录 过 程 需要 登录 验证 模块 的 配 
合 才 可 顺利 完成 。 

我 们 先 看 登录 界面 ， 该 界面 完全 是 通过 HTML 5 和 Bootstrap 框架 进行 设计 的 ， 并 可 以 适应 
不 同 的 终端 平台 。 登 录 界 面 的 页 面 代码 (参见 源 代码 chapter09\login.html 文件 ) 如 下 所 示 。 


【示例 9-2】 用 户 管理 系统 登录 界面 
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案例 : HTML 5+CSS 3 之 轻 量 级 内 容 管理 系统 


我 们 使 用 目前 比较 流行 的 Bootstrap 框架 创建 了 一 个 登录 界面 。 下 面 我 们 详细 介绍 : 

第 08 一 09 行 代码 和 第 11 行 代码 分 别 引 用 了 几 个 Bootstrap 框架 的 CSS 样式 文件 ， 这 些 CSS 
样式 文件 均 保存 在 “css” 子 目录 中 ; 

第 19 行 代码 定义 的 body 标签 元 素 中 的 class 属性 ， 引 用 了 第 11 行 代码 中 bootstrap-admin- 
theme.css 样式 文件 中 的 类 "bootstrap-admin-without-padding"， 该 类 作用 于 整个 登录 页 面 ; 

第 20 一 62 行 代码 定义 的 div 标签 元 素 中 的 class 属性 ， 引 用 了 Bootstrap 框架 中 的 

“container” 样 式 类 ， 其 相当 于 一 个 容器 ; 

第 21 一 61 行 代码 定义 的 div 标签 元 素 中 的 class 属性 ， 引 用 了 Bootstrap 框架 中 的 “row” 样 
式 类 ， 其 相当 于 一 行 ， 且 “row” 样 式 类 必须 放置 于 第 20 行 代码 中 的 “container” 样 式 类 之 内 ; 

第 22 一 60 行 代码 定义 的 div 标签 元 素 中 的 class 属性 ， 引 用 了 Bootstrap 框架 中 的 “col-lg-12 
col-md-12 col-sm-12 col-xs-12” 样 式 类 ， 其 相当 于 一 组 列 ， 且 “col-” 系 列 样式 类 必须 放置 于 第 
21 行 代码 中 的 “row” 样 式 类 之 内 ; Bootstrap 框架 的 “col-” 系 列 样式 类 可 以 帮助 页 面 适应 不 同 
规格 的 屏幕 分 辨 率 ， 且 未 尾 的 数字 “-12” 为 最 大 数值 ， 表 示 该 列 独占 一 行 ; 

第 23 一 25 行 代码 通过 div 和 h2 标签 元 素 定义 了 页 面 标题 ; 

第 26 一 29 行 代码 通过 div 和 a 标签 元 素 定义 了 一 个 提示 信息 ; 

第 30 一 59 行 代码 通过 form 标签 元 素 定义 了 用 户 登 录 表单 ， 其 class 属性 值 为 "bootstrap- 
admin-login-form"， 引 用 自 Bootstrap 框架 ; 

第 32 一 38 行 代码 通过 div 标签 元 素 定 义 了 一 个 用 户 名 输入 框 ， 其 class 属性 值 为 "form- 
group"， 引 用 自 Bootstrap 框架 ; 第 33 一 34 行 代码 定义 的 input 标签 元 素 中 注册 了 一 个 onblur 事 
件 ， 该 事件 的 on_userid_blur() 函 数 方法 用 于 验证 用 户 名 的 合法 性 ， 下 面 我 们 会 介绍 到 该 函数 方 
法 ; 第 35 一 37 行 代码 定义 的 span 标签 元 素 用 于 显示 提示 信息 ; 

第 39 一 45 行 代码 同样 通过 div 标签 元 素 定 义 了 一 个 密码 输入 框 ， 其 中 第 40 一 41 行 代码 定义 
的 input 标签 元 素 中 注册 了 一 个 onblur 事件 ， 其 函数 方法 用 于 验证 密码 的 合法 性 ; 

第 52 一 53 行 代 码 通过 button 标签 元 素 定义 了 一 个 提交 按钮 ， 注 意 到 其 初始 状态 为 
disabled。 

下 面 我 们 运行 测试 这 个 登录 页 面 ， 效 果 如 图 9.4 所 示 。 下 面 我 们 尝试 手动 将 浏览 器 窗口 缩 
小 ， 其 页 面 效 果 如 图 9.5 所 示 。 图 9.4 与 图 9.5 对 比 可 以 看 到 ， 应 用 Bootstrap 框架 使 得 页 面 布局 
随 着 窗口 大 小 的 改变 而 自动 进行 了 适应 调整 ， 保 持 了 页 面 内 容 的 整齐 美观 。 
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HTML5+CSS3 之 经 旺 二 内 容 -。 六 


用 轩 |filey//EYWebstormprojectyhtmlkcs ”CGC QBing<cvirh> 会 自 寻 会 各 » 三 
rz 一 
i € 让 mey//EVywebsormprojeayh - ce » 至 
HTML5+CSS3 之 轻 量 级 内 容 管 理 系统 HTML5+CSS3 之 轻 量 级 内 容 
| 
登录 系统 
[En 登录 系统 
Peano rr ee 
[Ea Re 
Please enter password 登录 字 码 
口 记 住 我 Piease cnter pas5word 
DO wes 
= 四 
煌 用 户 注 前 
9.4 内 容 管理 系统 登录 页 面 (一 ) 图 9.5 内 容 管理 系统 登录 页 面 (二 ) 


以 上 是 登录 模块 的 页 面 代码 部 分 ， 下 面 我 们 接着 看 登录 模块 的 验证 代码 部 分 。 登 录 验 证 功能 
是 通过 JavaScript 脚本 语言 (参见 源 代码 chapter09Yjs\loginjs 文件 ) 实现 的 。 


【示例 9-3】 用 户 管理 系统 登录 验证 
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构建 移动 网 站 与 APP: HTML 5+CSS 3+jQuery Mobile 入 门 与 实战 2 


我 们 使 用 JavaScript 脚本 语言 和 MD5 加 密 算法 实现 了 登录 验证 模块 。 下 面 我 们 详细 介绍 : 
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第 04 行 代码 定义 了 一 组 全 局 变量 ， 用 于 保存 用 户 id (g_userid)、 登 录 密 码 (g_pwd) 和 用 
户 权限 〈g_reserved) 信息 ; 其 中 用 户 权 限 很 重要 ， 后 面 的 js 代码 会 根据 登录 用 户 的 权限 跳 转 到 
不 同 的 功能 页 面 中 ; 

第 05 一 06 行 代码 定义 了 两 个 全 局 变量 (初始 值 为 false)， 用 于 保存 用 户 id 和 登录 密码 的 验 
证 状态 ; 

第 27 一 43 行 代码 定义 了 一 个 函数 方法 (函数 名 为 on_userid_blur())， 其 就 是 【示例 9-2】 中 
第 33 一 34 行 代码 中 为 input 标签 元 素 注册 的 onblur 事件 方法 ， 用 于 验证 用 户 id 的 合法 性 ; 第 33 
行 代 码 调 用 了 一 个 函数 方法 (函数 名 为 index_item_userid0)， 其 用 于 遍历 本 地 存储 中 的 用 户 id 
并 返回 是 否 查 找到 该 用 户 id; 

函数 方法 (index_item_userid0) 的 定义 在 第 10 一 23 行 代码 ; 第 12 一 21 行 代码 通过 for 循环 
语句 遍历 localStorage 键 值 ， 用 于 验证 用 户 输入 的 用 户 id 是 否 在 本 地 存储 的 数据 中 ， 并 通过 第 05 
行 代码 定义 的 全 局 变量 (v_validata_userid) 保存 验证 结果 并 返回 ， 函数 方法 (on_userid_blur()) 
通过 该 全 局 变量 的 值 来 修改 【示例 9-2】 中 第 35 一 37 代码 定义 的 span 标签 元 素 的 内 容 ， 在 页 面 
中 显示 用 户 输入 用 户 id 是 否 合 法 。 

下 面 我 们 尝试 在 登录 页 面 中 输入 用 户 id 值 “king”( 该 用 户 名 已 保存 在 本 地 存储 中 ) 来 测 
试 ， 效 果 如 图 9.6 所 示 。 从 图 中 可 以 看 到 提示 信息 为 “It is a right userid.”， 表 示 用 户 输入 的 用 户 
id 存在 并 验证 通过 。 


入 HTML5+CSS3 之 径 量 及 .、 X 和 be 
| 钙 |localhost63342/html-css-jqut 时 跟 C Qanrs<cmrk> 会 | 自 史 全 全 » 三 
HTML5+CSS3 之 轻 量 级 内 容 管 理 系统 

请 输入 用 户 注册 信息 并 点 十 " 登 疆 " 控 钮 


图 96 HTML 5+CSS 3 内 容 管理 系统 用 户 id 验证 (一 ) 


下 面 我 们 再 次 尝试 在 登录 页 面 中 输入 用 户 id 值 “test”( 该 用 户 名 在 本 地 存储 中 不 存在 ) 来 
测试 ， 效 果 如 图 9.7 所 示 。 
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- oO x 
三 HIM5rcsssZzEas、X 于 


不 名 localhost63342/html-css-jqu 导 踊 CQ 6no<Ccmrk> 个 | 自 上 会 马 证 三 


HTML5+CSS3 之 轻 量 级 内 容 管 理 系统 


请 答 入 用 户 注册 信息 并 点 击 登 际 掖 钮 x 
登录 系统 
re ED 


Please check your uerid and retry 


新 用 户 注册 


图 9.7 HTML5+CSS3 内 容 管理 系统 用 户 id 验证 (二 ) 

从 图 9.7 中 可 以 看 到 提示 信息 为 “Please check your userid, and retry”， 表 示 用 户 输入 的 用 户 
id 未 验证 通过 ; 

对 比 图 9.6 与 图 9.7 可 以 看 到 ， 用 户 id 验证 通过 后 与 未 通过 后 的 提示 信息 是 不 同 的 ， 同 时 ， 
如 果 用 户 id 验证 未 通过 ,【 示 例 9-3】 中 的 第 36 行 代码 会 将 用 户 输入 的 用 户 id 自动 清除 ， 提 示 
用 户 重 新 输入 ; 

登录 密码 的 验证 过 程 比 用 户 id 的 验证 过 程 略微 复杂 一 些 。 第 68 一 86 行 代码 定义 了 一 个 
函数 方法 (函数 名 为 on_pwd_blur() )， 该 方法 就 是 【示例 9-2】 中 第 40 一 41 行 代码 中 为 
input 标签 元 素 注册 的 onblur 事件 方法 ， 用 于 验证 登录 密码 的 合法 性 ; 第 70 行 代码 通过 
MD5 加 密 算法 将 用 户 输 入 的 登录 密码 进行 了 加 密 ， 并 保存 在 变量 “md5_password” 中 ; 第 
75 行 代码 调用 了 一 个 函数 方法 (函数 名 为 index_item_pwd())， 其 用 于 遍历 用 户 id 和 登录 密 
码 ， 验 证 登录 信息 是 否 合法 ; 

函数 方法 (index_item_pwd0) 的 定义 在 第 47 一 64 行 代码 ; 第 50 行 代 码 通过 MD5 加 密 算法 
将 用 户 输入 的 登录 密码 进行 了 加 密 ， 并 保存 在 变量 “md5_password” 中 ; 第 51 一 62 行 代码 通过 
for 循环 语句 遍历 localStorage 键 值 ， 用 于 验证 用 户 输入 的 用 户 id 与 加 密 后 的 登录 密码 是 否 合 
法 ， 并 通过 第 06 行 代码 定义 的 全 局 变量 (v_validata_ pwd) 保存 验证 结果 并 返回 ， 函数 方法 
(on_userid_pwd()) 通过 该 全 局 变量 的 值 来 修改 【示例 9-2】 中 第 35 一 37 行 代码 定 义 的 span 标 
签 元 素 的 内 容 ， 并 在 页 面 中 显示 用 户 输入 的 登录 信息 是 否 合法 有 效 。 

下 面 我 们 接着 尝试 在 登录 页 面 中 输入 登录 密码 “000000” 来 测试 ， 其 效果 如 图 9.8 所 示 。 从 
图 中 可 以 看 到 提示 信息 为 “Please check your password, and retry”， 表 示 用 户 输入 的 登录 密码 未 验 
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0 
中 HTML5+CS532Bs。 X 【二 


> 


€ 而 |localhost63342/himi-css-jqut 国 器 C QApngscrk> 会 | 自 时 人 会昌» 
HTML5+CSS3 之 轻 量 级 内 容 管理 系统 


清二 入 用 户 注 贡 售 皇 寺 宇 去 瑟 陆丰 二 


登录 新 用 户 注册 


图 9.8 HTML5+CSS 3 内 容 管理 系统 登录 密码 验证 〈 一 ) 

下 面 我 们 再 次 尝试 在 登录 页 面 中 输入 登录 密码 “123456” 来 测试 ， 其 效果 如 图 9.9 所 示 。 从 
图 中 可 以 看 到 提示 信息 为 “It is a right password.”， 表 示 用 户 输入 的 登录 密码 验证 通过 ， 同 时 ， 
我 们 注意 到 密码 输入 框 中 的 字符 已 经 被 替换 为 MD5 加 密 密 码 ,“ 登 录 ” 按 钮 也 处 于 有 效 状 态 。 


2 口 x 
志 HTML5+CSS3 之 会 量 庚 . ba 
二 ® localhost6: qu 轩 路 CGC QQapbnpr<cmr> 个 | 和 白 虽 于 四 2 三 
HTML5+CSS3 之 轻 量 级 内 容 管 理 系统 
请 输入 用 户 注册 信息 并 放 击 名 陆兵 纽 
登录 系统 


9.9 HTML 5 +CSS 3 内 容 管理 系统 登录 密码 验证 (二) 

将 “登录 ”按钮 重新 设 定 为 有 效 的 是 第 90 一 96 行 代码 定义 的 validateSubmit0 函 数 方 法 ， 该 
函数 方法 通过 判断 第 05 一 06 行 代码 定义 的 两 个 全 局 变量 (v_validata_userid 和 v_validata pwd) 
的 布尔 值 来 决定 如 何 设 定 “ 登 录 ” 按 钮 的 状态 ， 只 有 当 用 户 输入 的 登录 信息 合法 有 效 时 ,“ 登 
录 ” 按 钮 才 会 被 重新 设 定 为 有 效 ， 并 人 允许 用 户 进行 登录 ; 
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用 户 成 功 登录 后 ， 将 通过 第 100 一 115 行 代码 定义 的 onLoginSubmitO 函 数 方法 实现 重 定向 跳 
转 ; 第 101 行 、 第 104 行 和 第 107 行 代码 通过 if 语句 判断 第 04 行 代码 定义 的 全 局 变量 
g_reserved 的 值 来 选择 跳 转 到 不 同 页 面 中 去 ， 其 中 全 局 变量 g_reserved 的 赋值 是 在 第 56 行 代码 进 
行 操作 实现 的 ， 其 用 来 保存 用 户 权限 数值 ， 第 102 一 103 行 代码 、 第 104 一 105 行 代码 和 第 107 一 
108 行 代码 通过 location.href 参数 进行 页 面 重 定向 ， 并 传递 了 第 04 行 代码 定义 的 全 局 变量 
g_userid 和 g_pwd 作为 url 参数 ， 其 中 全 局 变量 g_userid 和 g_pwd 的 赋值 是 在 第 S4 一 55 行 代码 
进行 操作 实现 的 ， 其 用 来 保存 用 户 id 和 加 密 密 码 数 值 。 


日 . 5 新 用 户 注册 模块 


读者 注意 到 登录 界面 〈 见 图 9.4 与 图 9.5) 中 有 一 个 “新 用 户 注 册 ” 链 接 ， 这 个 是 为 新 用 户 
设计 的 模块 。 新 用 户 注册 模块 允许 在 系统 中 加 入 普通 级 别 的 用 户 ， 如 果 需 要 更 改 用 户 权 限 等 级 ， 
则 需要 系统 管理 员 在 管理 系统 的 主 界面 上 进行 操作 。 

新 用 户 注册 界面 的 页 面 代码 (参见 源 代码 chapter09\reg.html 文件 ) 如 下 所 示 。 


【示例 9-4】 新 用 户 注册 界面 
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我 们 继续 使 用 Bootstrap 框架 创建 一 个 新 用 户 注册 界面 。 下 面 详细 介绍 : 

第 08 一 09 行 代码 和 第 11 行 代码 分 别 引 用 了 几 个 Bootstrap 框架 的 CSS 样式 文件 ， 这 些 CSS 
样式 文件 均 保存 在 “css” 子 目录 中 ; 

第 28 行 代码 定义 的 body 标签 元 素 中 的 class 属性 ， 引 用 了 第 11 行 代码 中 bootstrap-admin- 
theme.css 样式 文件 中 的 类 "bootstrap-admin-without-padding"， 该 类 作用 于 整个 新 用 户 注册 页 面 ; 

第 29 一 77 行 代码 定义 的 div 标签 元 素 中 的 class 属性 ， 引 用 了 Bootstrap 框架 中 的 

“container” 样 式 类 ， 其 相当 于 一 个 容器 ; 

第 30 一 76 行 代码 定义 的 div 标签 元 素 中 的 class 属性 ， 引 用 了 Bootstrap 框架 中 的 “row” 样 
式 类 ， 其 相当 于 一 行 ， 且 “row” 样 式 类 必须 放置 于 第 29 行 代码 中 的 “container” 样 式 类 之 内 ; 

第 31 一 60 行 代码 定义 的 div 标签 元 素 中 的 class 属性 ， 引 用 了 Bootstrap 框架 中 的 “col-lg-12 
col-md-12 col-sm-12 col-xs-12” 样 式 类 ， 其 相当 于 一 组 列 ， 且 “col-” 系 列 样式 类 必须 放置 于 第 
30 行 代码 中 的 “row” 样 式 类 之 内 ， 此 处 的 使 用 方法 与 前 面 【 示 例 9-2】 代 码 中 的 登录 界面 是 一 
致 的 ; 

第 39 一 74 行 代码 通过 form 标签 元 素 定义 了 新 用 户 注册 表单 ， 其 class 属性 值 为 "bootstrap- 
admin-login-form" 引 用 自 Bootstrap 框架 ; 注意 ， 在 第 39 行 代码 中 ， 为 form 表单 增加 一 个 
onsubmit 事件 的 函数 方法 ， 具 体内 容 我 们 在 后 面 会 进行 详细 介绍 ; 

第 41 一 70 行 代码 通过 一 组 div、input 和 span 标签 元 素 定义 了 一 组 新 用 户 注册 时 需要 输入 的 
信息 框 和 提示 信息 ， 其 class 属性 值 为 "form-group" 引 用 自 Bootstrap 框架 ; 

第 71 一 73 行 代码 通过 button 标签 元 素 定义 了 一 个 提交 按钮 ， 注 意 提交 操作 将 会 被 第 39 行 
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代码 定义 的 onsubmit 事件 处 理 。 
运行 测试 这 个 新 用 户 注册 页 面 ， 效 果 如 图 9.10 所 示 。 


ss 


不 本 | localhost63342/html 转眼 7 C Bing cirri | 2 三 


HTML5+CSS3 之 轻 量 级 内 容 管 理 系 统 


图 9.10 新 用 户 注册 页 面 


下 面 我 们 可 以 尝试 手动 输入 一 些 新 用 户 信息 进行 注册 ， 注 意 密码 框 有 两 个 ， 也 就 是 说 用 户 需 
要 连续 输入 两 次 密码 进行 验证 ， 避 免 注 册 新 密码 时 发 生 错 误 。 验 证 过 程 如 下 脚本 代码 (参见 源 代 
码 chapter09Yjs\reg.js 文件 ) 所 示 。 


【示例 9-5】 新 用 户 注册 验证 
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我 们 使 用 JavaScript 脚本 语言 和 MD5 加 密 算法 实现 了 新 用 户 注册 时 的 验证 工作 。 下 面 我 们 
详细 介绍 : 

第 04 一 14 行 代码 与 第 15 一 26 行 代码 定义 了 两 个 函数 方法 (函数 名 分 别 为 on_pwd_blur0) 和 
on_repwd_blur())， 就 是 【示例 94】 中 第 50 一 51 行 代码 和 第 58 一 59 行 代码 中 为 input 标签 元 素 
注册 的 onblur 事件 方法 ， 这 两 个 函数 方法 会 对 新 用 户 注册 时 输入 的 密码 进行 验证 ， 如 果 输 入 的 
密码 一 致 ， 就 会 提示 如 图 9.11 所 示 的 页 面 信 息 。 


第 9 章 案例 : HTML 5+CSS 3 之 轻 量 级 内 容 管理 系统 


如 果 输 入 的 密码 不 一 致 ， 就 会 提示 如 图 9.12 所 示 的 页 面 信息 。 


[ul x 
se | Pg 


| 多 |localhost63342/htm 转台 " @ QBing<Csk> 2 三 | 声色 localhost63342/htr 加 器" @ QHhno<ryk> 3 三 


HTML5+CSS3 之 轻 量 级 内 容 管 理 系统 HTML5+CSS3 之 轻 量 级 内 容 管 理 系统 


请 竺 入 用 户 注册 信息 开 专 击 "注册 - 棕 记 x 请 锭 入 用 户 注册 信息 并 谈 击 " 福 册 " 控 钮 


[seoausal SpecalUcer 


Please enter user name Please enter user Nam 


图 9.11 新 用 户 注册 密码 一 至 图 9.12 新 用 户 注册 密码 不 一 至 

第 30 一 41 行 代码 定义 的 函数 方法 函数 名 分 别 为 reg())， 就 是 【示例 9-4】 中 第 39 行 代码 

中 为 form 表单 注册 的 onsubmit 事件 方法 ， 在 reg() 函 数 中 ,创建 了 一 个 保存 用 户 信息 数 组 
Cuserf})， 对 每 条 用 户 信息 逐一 进行 了 赋值 ， 其中， 用 户 id、 密 码 和 用 户 名 信息 通过 页 面 中 的 
输入 信息 获取 ， 用 户 角 色 等 级 和 用 户 权限 默认 为 “user” 级 别 ; 

这 里 比较 特殊 的 是 id 信息 ， 其 通过 调用 第 45 一 51 行 代码 定义 的 get_new_user_id0 函 数 方法 
获取 ; 因为 本 系统 使 用 的 是 HTML 5 的 本 地 存储 (localStorage )， 其 与 传统 的 关系 型 数据 库 区 别 
还 是 很 大 的 ， 像 自动 累计 用 户 信 息 id 值 这 样 的 功能 是 不 具备 的 ; 因此 ， 这 里 我 们 通过 
get_new_user id0 函 数 模拟 了 一 个 自动 累计 用 户 信息 id 值 的 操作 ， 便 于 进行 数据 管理 。 

新 用 户 信息 都 输入 完成 后 ， 就 可 以 单 击 “ 注 册 ” 按 钮 提交 新 用 户 信息 到 HTML 5 本 地 存储 
之 中 。 


名 .O 游客 信息 模块 


在 前 文 的 介绍 中 ， 我 们 提 到 本 系统 设计 了 三 种 角色 权限 系统 管理 员 admin、 系 统 用户 user 
和 游客 guest)， 下 面 我 们 就 从 最 简单 、 最 基本 的 游客 信息 模块 开始 详细 介绍 。 

既然 是 游客 权限 ， 那 么 游客 信息 模块 提供 给 用 户 的 就 是 最 基本 的 浏览 功能 ， 而 且 是 浏览 仅仅 
具有 游客 权限 的 用 户 信息 。 在 第 9.4 节 中 介绍 的 登录 验证 模块 ， 实 现 了 根据 登录 用 户 的 权限 ， 跳 
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转 到 相应 用 户 界面 的 功能 。 
我 们 在 图 9.4 所 示 的 登录 界面 中 输入 用 户 名 (guest) 和 密码 〈123456) 后 单 击 “ 登 录 ” 按 
钮 ， 就 会 跳 转 到 如 图 9.13 所 示 的 游客 信息 模块 界面 。 


(Jp ie localhosts3242/himies 加 误 ” C QBng<k 会 四 好 会 四 > 三 
用 户 各 Tour Guest 用 户 等 铅 。 guest Satings 亲生 本 元 各 理 


HTML5 轻 量 级 内 容 管理 系统 ( 游客 ) 首 5 优 " 。 关 


” “”。 轻 量 级 内 容 管理 系统 


WB 
全 入 
关于 > 用 六 信息 (了 限 各 硅 ) 
Mo。 可 用 户 中 用户 名 宙 罗 4 
1 10003 guest Tour Guest 123455 guest 
HTML5 + CSS3 之 经 旺 入 内 管理 不 过 ©2015 Hngwe 


图 9.13 游客 信息 模块 界面 
游客 信息 模块 界面 的 页 面 代码 (参见 源 代码 chapter09\tour.html 文件 ) 如 下 所 示 。 
【示例 9-6】 游客 信息 模块 界面 
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构建 移动 网 站 与 APP: HTML 5+CSS 3+jQuery Mobile 入 门 与 实战 | 


第 17 行 代码 调用 了 该 模块 的 JavaScript 脚本 文件 ， 该 文件 的 脚本 代码 (参见 源 代码 
chapter09\jstourjs 文件 ) 如 下 所 示 。 


【示例 9-7】 游客 信息 模块 脚本 


: HTML 5+CSS 3 之 轻 量 级 内 容 管理 系统 


构建 移动 网 站 与 APP: HTML 5+CSS 3+jQuery Mobile 入 门 与 实战 


这 段 代码 主要 实现 了 页 面 初始 化 、 登 录 信 息 加 载 和 游客 用 户 信息 浏览 等 几 个 功能 ， 下 面 我 们 
详细 介绍 : 

在 第 04 一 13 行 代 码 定义 的 页 面 文档 初始 化 方法 中 ， 第 08 行 代码 调用 了 一 个 函数 方法 

(ConPageLoad0;) 用 于 实现 页 面 初 始 化 和 登录 信息 初始 化 ; 

onPageLoad() 函 数 方法 的 定义 在 第 49 一 66 行 代码 中 ， 在 该 函数 内 通过 一 个 for 循环 语句 遍历 
了 本 地 存储 〈localStorage) 中 的 用 户 信息 ， 并 通过 与 url 传递 过 来 的 用 户 信息 参数 进行 比 对 ， 来 
获取 登录 用 户 的 信息 ; 

通过 url 获取 用 户 信息 参数 的 函数 方法 (GetQueryString0) 是 在 第 41 一 45 行 代码 中 定义 
的 ， 原 理 是 通过 正则 表达 式 来 获取 unl 参数 信息 ， 然 后 返回 具体 的 参数 值 ; 

第 64 一 65 行 代码 将 获得 的 用 户 名 和 用 户 角 色 等 级 信息 显示 在 【示例 9-6】 中 第 30 行 和 第 32 
行 代码 定义 的 芷 标签 元 素 内 ， 如 图 9.13 所 示 ; 

第 12 行 代 码 调用 了 一 个 函数 方法 〈init_userinfo0;) 用 于 实现 游客 用 户 信息 初始 化 ; 
init_userinfo() 函 数 方法 的 定义 在 第 17 一 37 行 代码 中 ， 在 该 函数 内 通过 一 个 for 循环 语句 遍历 了 本 
地 存储 (localStorage》 中 的 用 户 信 息 ， 并 通过 第 24 行 代码 的 让 条 件 语句 挑选 出 全 部 游客 用 户 信 
息 ， 对 于 满足 条 件 的 游客 用 户 信息 ， 通 过 第 26 一 34 行 代码 显示 在 【示例 9-6】 中 第 74 一 75 行 代 
码 定义 的 id 值 为 "id-userinfo" 的 tbody 标签 元 素 内 ， 如 图 9.13 所 示 。 


日 .7 用 户 信息 模块 


在 本 系统 的 权限 管理 中 ， 用 户 权限 (user〉 比 游客 guest) 权限 要 高 一 个 级 别 。 在 用 户 信息 模块 
中 可 以 浏览 到 系统 的 全 部 用 户 信息 ， 但 相 比 于 管理 员 信 息 模块 ， 这 里 是 无 法 编辑 用 户 信息 的 。 
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我 们 在 图 9.4 所 示 的 登录 界面 中 输入 用 户 名 (messi) 和 密码 〈123456) 后 单 击 “登录 ” 按 
钮 ， 就 会 跳 转 到 如 图 9.14 所 示 的 用 户 信 息 模块 界面 。 


|F 


(es 画 |localhost63342/html-css- 加 申 C QBing<Cvizk> 究 | 自 时 会 各 2 三 


用 户 和 名: Lao Messi 用 户 等 强 。 ussr Settings 闪 皇 登 录 管 理 - 
HTML5 轻 量 级 内 容 管理 系统 ”首页 。” 管理” 关于 


二 轻 量 级 内 容 管理 系统 

信息 

关于 》 用 户 信息 
No. id 开户 D 用 记名 密码 权限 
1 10001 king Martn King 123456 admin 
2 10002 messi Leo Messi 123456 User 
3 10003 guest Tour Gucst 123456 guest 


HTML5 + CSS3 之 轻 量 级 内 容 管理 系统 ©2016 kngwpe 


图 9.14 用 户 信息 模块 界面 
用 户 信息 模块 界面 的 页 面 代码 参见 源 代码 chapter09\main.html 文件 ) 如 下 所 示 。 
【示例 9-8】” 用 户 信息 模 块 界面 
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: HTML 5+CSS 3 之 轻 量 级 内 容 管理 系统 


在 这 段 代码 中 ， 第 17 行 代码 调用 了 该 模块 的 JavaScript 脚本 文件 ， 该 文件 的 脚本 代码 ( 参 
见 源 代码 chapter09swmain.js 文件 ) 如 下 所 示 。 


【示例 9-9】 用 户 信息 模块 脚本 


构建 移动 网 站 与 APP: HTML 5+CSS 3+jQuery Mobile 入 门 与 实 成 访 


这 段 代 码 主要 实现 了 页 面 初始 化 、 登 录 信 息 加 载 和 用 户 信息 浏览 等 几 个 功能 ， 下 面 我 们 详细 
介绍 一 下 : 

在 第 04 一 13 行 代码 定义 的 页 面 文档 初始 化 方法 中 ， 第 08 行 代码 调用 了 一 个 函数 方法 
(onPageLoad();) 用 于 实现 页 面 初 始 化 和 登录 信息 初始 化 ; 

onPageLoad() 函 数 方法 的 定义 在 第 45 一 61 行 代码 中 ， 在 该 函数 内 通过 一 个 for 循环 语句 遍历 
了 本 地 存储 〈localStorage) 中 的 用 户 信息 ， 并 通过 与 url 传递 过 来 的 用 户 信 息 参数 进行 比 对 ， 来 
获取 登录 用 户 的 信息 ; 

通过 url 获取 用 户 信息 参数 的 函数 方法 〈GetQueryString0 ) 是 在 第 37 一 41 行 代码 中 定义 
的 ， 原 理 是 通过 正则 表达 式 来 获取 url 参数 信息 ， 然 后 返回 具体 的 参数 值 ; 

第 59 一 60 行 代码 将 获得 的 用 户 名 和 用 户 角色 等 级 信息 显示 在 【示例 9-8】 中 第 30 行 和 第 32 
行 代码 定义 的 二 标签 元 素 内 ， 如 图 9.14 所 示 ; 

第 12 行 代码 调用 了 一 个 函数 方法 (init_userinfo0;) 用 于 实现 用 户 信息 初始 化 ，init_userinfo() 
函数 方法 的 定义 在 第 17 一 33 行 代码 中 ， 在 该 函数 内 通过 一 个 for 循环 语句 遍历 了 本 地 存储 
(localStorage) 中 的 全 部 用 户 信息 ;通过 第 23 一 31 行 代码 显示 在 【示例 9-8】 中 第 90~91 行 代 
码 定义 的 id 值 为 "id-userinfo" 的 tbody 标签 元 素 内 ， 如 图 9.14 所 示 。 


日 .号 ”管理 员 信息 模块 


在 本 系统 的 权限 管理 中 ， 管 理 员 权限 是 最 高 的 一 个 级 别 。 在 管理 员 信息 模块 中 不 但 可 以 浏览 
到 系统 的 全 部 用 户 信息 ， 还 可 以 编辑 用 户 信息 (包括 新 增 、 修 改 和 删除 等 操作 )。 

我 们 仍旧 在 图 9.4 所 示 的 登录 界面 中 输入 用 户 名 〈king) 和 密码 〈123456) 后 单 击 “登录 ” 
按钮 ， 就 会 跳 转 到 如 图 9.15 所 示 的 管理 员 信息 模块 界面 。 
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图 9.15 管理 员 信息 模块 界面 
管理 员 信 息 模 块 界面 的 页 面 代码 (参见 源 代码 chapter09admin.html 文件 ) 如 下 所 示 。 
【示例 9-10】 管理 员 信 息 模块 界面 
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第 76 一 101 行 代码 用 于 显示 浏览 信息 ， 第 102 一 177 行 代码 用 于 显示 新 增 用 户 信 息 ， 第 178 
一 246 行 代码 用 于 显示 编辑 用 户 信息 ; 第 17 行 代码 调用 了 该 模块 的 JavaScript 脚本 文件 ， 该 文件 
的 脚本 代码 (参见 源 代码 chapter09jsadmin.js 文件 ) 如 下 所 示 。 


【示例 9-11】 管理 员 信息 模块 脚本 


构建 移动 网 站 与 APP: HTML 5+CSS 3+jQuery Mobile 入 门 与 实战 有 
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这 段 代 码 主要 实现 了 页 面 初始 化 、 登 录 信息 加 载 和 用 户 信息 浏览 与 管理 等 几 个 功能 ， 下 面 我 
们 详细 介绍 : 

在 第 04 一 13 行 代码 定义 的 页 面 文档 初始 化 方法 中 ， 第 08 行 代码 调用 了 一 个 函数 方法 
(ConPageLoad0;) 用 于 实现 页 面 初始 化 和 登录 信息 初始 化 ; 

onPageLoad() 函 数 方法 的 定义 在 第 63 一 79 行 代码 中 ， 在 该 函数 内 通过 一 个 for 循环 语句 遍历 
了 本 地 存储 (localStorage〉 中 的 用 户 信息 ， 并 通过 与 url 传递 过 来 的 用 户 信息 参数 进行 比 对 ， 来 
获取 登录 用 户 的 信息 ; 

通过 url 获取 用 户 信息 参数 的 函数 方法 〈GetQueryString0) 是 在 第 55 一 59 行 代 码 中 定义 
的 ， 原 理 是 通过 正则 表达 式 来 获取 url 参数 信息 ， 然 后 返回 具体 的 参数 值 ; 

第 77 一 78 行 代码 将 获得 的 用 户 名 和 用 户 角色 等 级 信息 显示 在 【示例 9-10】 中 第 30 行 和 第 
32 行 代码 定义 的 下 标签 元 素 内 ， 如 图 9.15 所 示 ; 

第 12 行 代码 调用 了 一 个 函数 方法 〈init_userinfo0;) 用 于 实现 用 户 信息 初始 化 ，init_userinfo0 
函数 方法 的 定义 在 第 17 一 51 行 代 码 中 ， 在 该 函数 内 通过 一 个 for 循环 语句 遍历 了 本 地 存储 
(localStorage) 中 的 全 部 用 户 信 息 ; 通过 第 25 一 46 行 代码 显示 在 【示例 9-10】 中 第 9 一 97 行 
代码 定义 的 id 值 为 "id-userinfo" 的 tbody 标签 元 素 内 : 另外 ， 第 33 一 45 行 代码 动态 添加 了 三 个 按 
钮 ， 分 别 用 于 实现 新 增 、 编 辑 和 删除 用 户 信息 的 操作 ， 如 图 9.15 所 示 ; 

新 增 用 户 信息 界面 的 代码 是 在 【示例 9-10】 中 第 102 一 177 行 代码 中 实现 的 ， 其 中 第 111 一 
114 行 代码 定义 的 form 表单 注册 了 一 个 onsubmit 事件 方法 (名 称 为 insert_userinfo0)， 用 于 实现 
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用 户 提交 表单 信息 的 操作 ;， insert_userinfo0) 事 件 方法 是 在 【示例 9-11】 中 第 83 一 94 行 代 码 中 实 
现 的 ， 在 该 方法 内 通过 获取 用 户 输入 的 表单 信息 来 添加 新 用 户 ， 需 要 注意 的 是 ， 用 户 信息 的 id 
值 是 根据 本 地 存储 数据 情况 自动 计算 出 来 的 ， 因 此 在 表单 界面 中 是 不 可 编辑 的 。 

下 面 我 们 尝试 在 新 增 用 户 表单 中 输入 一 些 用 户 信息 ， 来 尝试 添加 新 用 户 的 操作 ， 界 面 如 图 
9.16 所 示 。 
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图 9.16 管理 员 信息 模块 界面 添加 用 户 表单 


新 添加 的 用 户 信息 输入 完毕 后 ， 单 击 “ 保 存 ” 按 钮 ， 页 面 会 自动 刷新 并 显示 最 新 的 用 户 信息 
状态 ， 具 体 如 图 9.17 所 示 。 
ss fr | 
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图 9.17 管理 员 信息 模块 界面 添加 新 用 户 效果 
在 图 9.17 中 ， 我 们 尝试 任 选 一 条 用 户 信息 《例如 id 值 为 “10005” 的 用 户 信息 ) 单 击 
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“edit” 按 钮 进行 编辑 ， 具 体 如 图 9.18 所 示 。 
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图 9.18 管理 员 信息 模块 界面 编辑 用 户 信息 
在 图 9.18 中 ，id 值 为 “10005” 的 用 户 信息 被 读 取 到 一 个 表单 之 中 ， 该 表单 的 代码 是 在 【 示 
例 9-10】 中 第 178 一 246 行 代码 所 实现 的 ， 而 读 取 用 户 信息 是 在 【示例 9-11】 中 第 98 一 106 行 代 
码 定义 的 名 称 为 “load_edit_userinfo(editid);” 的 函数 方法 所 实现 的 ， 需 要 注意 的 是 ， 用 户 信息 的 
id 值 是 固定 不 可 编辑 的 ; 


下 面 ， 我 们 尝试 将 该 条 用 户 信息 的 角色 改 为 “user” 权限 改 为 “2”， 然 后 单 击 “ 保 存 ” 按 
钮 ， 操 作 后 的 效果 如 图 9.19 所 示 。 
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图 9.19 管理 员 信息 模块 界面 编辑 用 户 信息 效果 


在 图 9.19 中 可 看 到 ， 用 户 角 色 已 经 被 成 功 修改 为 “user” 了 ; 在 【示例 9-10】 中 第 186 一 
190 行 代码 定义 的 form 表单 注册 了 一 个 onsubmit 事件 方法 (名 称 为 edit_userinfo())， 用 于 实现 
用 户 提交 表单 信息 修改 后 的 操作 ;edit_userinfo() 事 件 方法 是 在 【示例 9-11】 中 第 110 一 121 行 代 
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码 中 实现 的 ， 在 该 方法 内 通过 获取 用 户 修改 后 的 表单 信息 来 编辑 用 户 信息 ; 
在 图 9.19 中 ， 我 们 任 选 一 条 用 户 信息 《例如 还 是 id 值 为 “10005” 的 用 户 信息 ) 单 击 
“delete” 按 钮 进行 删除 ， 具 体 如 图 9.20 所 示 。 
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图 9.20 管理 员 信息 模块 界面 删除 用 户 信息 

在 图 9.20 中 ，id 值 为 “10005” 的 用 户 信息 被 成 功 删除 了 ， 该 操作 是 在 【示例 9-11】 中 第 
41 一 44 行 代码 中 动态 添加 的 名 称 为 “delete_userinfo(deleteid);” 的 函数 方法 所 实现 的 ， 该 函数 方 
法 的 定义 是 在 【示例 9-11 】 中 第 125 一 131 行 代 码 所 实现 的 ;在 该 方法 内 ， 通 过 调用 
localStorage.removeItem(key) 函 数 删除 指定 key 值 的 用 户 数据 ， 然 后 再 通过 window.location.reload() 
方法 刷新 页 面 显示 更 新 后 的 用 户 数据 。 

以 上 就 是 管理 员 信息 模块 所 实现 的 主要 功能 ， 包 括 用 户 信息 浏览 、 添 加 、 编 辑 和 删除 。 可 
见 ，HTML 5 的 本 地 存储 〈localStorage) 基本 上 具有 了 关系 数据 库 的 主要 功能 。 虽 然 这 些 功能 还 
非常 简单 ， 但 考虑 到 全 部 是 在 浏览 器 客户 端 实现 的 ， 还 是 很 令 人 激动 的 。 


日 .日 、 关 于 本 系统 的 补充 说 明 


9.9.1 如 何 初始 化 用 户 信息 


在 前 面 小 节 的 介绍 过 程 中 ， 我 们 使 用 到 了 一 些 默认 存在 的 用 户 进行 测试 ， 这 些 默 认 用 户 可 以 
通过 下 面 的 简单 方法 先行 存储 到 本 地 ， 有 具体 代码 如 下 所 示 。 


【示例 9-12】 用户 信 息 初始 化 
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上 面 的 代码 初始 化 了 三 个 用 户 ， 分 别 为 一 个 系统 管理 员 admin、 一 个 系统 用 户 user 和 一 个 游 
客 guest， 这 样 便于 进行 系统 测试 。 


9.9.2 ”如 何 清 除 全 部 用 户 信 息 


在 测试 过 程 中 ， 难 免 会 出 现 不 可 预知 的 系统 错误 ， 导 致 整个 用 户 数据 错乱 ， 此 时 可 能 需要 全 
部 清除 用 户 信息 后 重新 进行 初始 化 ， 全 部 清除 用 户 信息 可 以 使 用 以 下 的 代码 。 
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localStorage.clear()7 
全 部 用 户 信息 清除 后 ， 再 使 用 第 9.9.1 小 节 中 介绍 的 初始 化 方法 恢复 用 户 数据 即 可 。 


9.9.3 关于 404 页 面 


对 于 一 个 完整 的 Web 系统 ， 错 误 〈404) 页 面 是 必 不 可 少 的 ， 这 样 可 以 大 大 提高 系统 纠 错 功 
能 。 本 系统 内 也 包含 一 个 简单 的 404 页 面 〈 参 见 源 代码 chapter09VM404.html 文件 )， 这 里 仅仅 作为 
参考 使 用 。 


9.9.4 关于 BootStrap 框架 


本 系统 使 用 了 大 量 的 BootStrap 框架 内 容 ， 鉴 于 篇 幅 原 因 且 侧重 点 不 同 ， 没 有 进行 更 深入 的 
介绍 ， 读 者 可 以 参照 附件 源码 进一步 学 习 。 这 里 可 以 提供 一 个 方向 供 大 家 参考 ， 辟 如 可 以 将 浏览 
器 大 小 设 定 为 平板 尺寸 或 手机 屏幕 尺寸 来 测试 本 系统 ， 相 信和 能 看 到 BootStrap 框架 为 我 们 都 完成 
了 哪些 不 可 思议 的 工作 。 

壁 如 ， 将 前 面 图 9.20 中 的 浏览 器 尽 可 能 缩小 到 手机 屏幕 尺寸 ， 页 面 效果 就 会 发 生 很 大 变 
化 ， 有 具体 如 图 9.21 所 示 。 页 面 中 的 很 多 内 容 自动 隐藏 了 ， 仅 仅 保留 了 关键 的 用 户 信息 内 容 。 
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图 9.21 管理 员 信息 模块 界面 删除 用 户 信息 〈 手 机 版 7 


9.9.5 关于 localStorage 与 sessionStorage 


本 系统 仅仅 使 用 到 了 HTML 5 本 地 存储 中 的 localStorage 的 内 容 ， 其 实 会 话 存储 
seesionStorage 的 内 容 也 是 非常 丰富 的 ， 将 两 者 结合 在 一 起 使 用 会 实现 更 多 更 强大 的 功能 。 
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9.10 4 千 


本 章 主 要 介绍 了 一 个 基于 HTML 5 + CSS 3 综合 技术 实现 的 轻 量 级 内 容 管理 系统 应 用 。 通 过 
模拟 基于 关系 型 数据 库 的 Web 系统 应 用 ， 本 系统 也 基于 HTML 5 本 地 存储 〈localStorage) 实现 
了 客户 端的 数据 信息 浏览 添加、 编辑 和 删除 功能 。 希 望 这 些 HTML 5、CSS 3 和 localStorage 
的 相关 内 容 能 给 广大 读者 在 Web 系统 开发 方面 带 来 启迪 与 帮助 。 
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> 


jQuery 的 创始 人 是 美国 的 John Resig， 他 于 2006 年 1 月 创建 了 jQuery 项 目 。 使 用 jQuery 库 
的 目的 是 让 网 站 开发 人 员 使 用 较 少 的 代码 完成 更 多 的 功能 〈 即 Write less，do more)。 它 具有 极其 
简洁 的 语法 ， 并 且 克 服 了 不 同 浏览 器 平台 之 间 的 兼容 性 ， 极 大 地 提高 了 程序 员 编写 网 站 代码 的 效 
率 。 随 着 人 们 对 jQuery 的 了 解 以 及 其 开源 特性 ， 越 来 越 多 的 人 开始 用 jQuery 创建 项 目 ， 并 且 对 
jQuery 进行 完善 和 优化 。 

本 章 主 要 包括 以 下 内 容 : 


@ ”认识 jQuery 在 网 页 中 发 挥 的 作用 
@ 了解 jQuery 库 的 核心 方法 $() 

@ 掌握 使 用 jQuery 操作 DOM 的 方法 
@ ”认识 jQuery 中 的 事件 


1 0.1 什么 是 jQuery 


JavaScript 发 展 了 这 么 多 年 ， 却 因为 很 多 浏览 器 有 自己 的 标准 而 让 人 写 起 来 就 头疼 。 技 术 逐 
渐进 步 ，jQuery 横 空 出 世 了 ， 它 到 底 有 什么 优势 ， 为 什么 会 这 么 流行 呢 ? 本 节 来 揭 开 jQuery 流 
行 的 真相 。 


10.1.1 jQuery 的 功能 


随 着 HTMLS 的 流行 和 微 信 jssdk 的 发 布 ，JavaScript 语言 又 重新 得 到 了 重视 ， 并 且 其 功能 被 
日 益 强化 。 在 过 去 ，JavaScript 仅仅 被 网 页 设计 人 员 用 来 创建 一 些小 特效 ， 可 以 看 作 一 门 编写 动 
态 页 面 的 装饰 性 的 语言 。 现 如 今 ，JavaScript 已 经 被 用 于 各 种 场合 ， 比 如 Ajax 技术 就 是 使 用 
JavaScript 让 网 页 具有 了 无 刷新 的 效果 ， 此 外 HTML 5 等 技术 的 出 现 ， 让 JavaScript 可 以 在 网 页 
上 绘制 图 形 、 动 态 、 控 制 多 媒体 等 ， 它 的 重要 性 已 经 不 言 而 喻 。 


JavaScript 虽然 有 个 前 级 Java， 与 Java 语言 却 不 相干 ， 它 具有 自己 的 一 套 语法 。 


由 于 JavaScript 属于 一 门 动态 编程 语言 ， 因 此 在 学 习 与 使 用 时 ， 极 容易 出 现 错误 ， 并 且 目 前 
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也 没有 特别 好 的 代码 检查 工具 ， 最 重要 的 是 各 种 不 同 浏览 器 之 间 的 代码 兼容 性 ， 比 如 同样 的 代码 
在 正 中 可 以 运行 ， 在 Firefox 中 却 无 法 显示 ， 这 常常 令 程序 员 们 抱怨 不 已 。jQuery 的 出 现 恰恰 解 
决 了 这 些 问 题 。 

为 了 让 读者 了 解 jQuery 代码 的 简洁 易 用 性 ， 下 面 新 建 一 个 网 页 (chapter10JavaScript_dom.html 
文件 )， 演 示 如 何 使 用 JavaScript 操纵 网 页 上 的 控件 ， 效 果 如 图 10.1 所 示 。 


JavaScript 示 例 1 - Worilla Firefor 


5 加 | @l- 会 ml- Bl © 


10.1 JavaScript 代码 和 jQuery 库 代码 的 示例 页 面 


【示例 10-1】 ”操纵 网 页 上 的 控件 
这 个 页 面包 含 了 一 个 HTML 的 表单 ， 在 表单 外 面 有 两 个 按钮 用 来 更 改 表 单 中 的 input 元 素 和 
textarea 元 素 的 背景 色 ，HTML 的 定义 如 下 。 
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HTML 页 面 上 放置 了 一 个 表单 标签 form， 在 form 内 部 有 两 个 input 元 素 和 一 个 textarea 元 
素 ， 在 form 元 素 的 外 面 放置 了 两 个 按钮 ， 分 别 为 这 两 个 按钮 定义 了 onClick 事件 ，“JavaScript 
更 改 表单 颜色 ”按钮 将 调用 setColorByJs 函数 ， 而 “jQuery 更 改 表 单 颜 色 ” 将 调用 
setColorByjQuery 函数 ， 这 两 个 函数 在 HTML 的 head 部 分 实现 ， 如 下 所 示 。 


通过 比较 JavaScript 和 jQuery 的 代码 ， 会 发 现 使 用 jQuery 只 需要 极其 精简 的 代码 (第 26~27 
行 ) 便 可 完成 使 用 JavaScript 需要 数 行 代码 (第 10~23 行 ) 完成 的 工作 ，JavaScript 代码 使 用 了 
getElementsByTagName 函数 ， 返 回 了 一 个 数组 ， 然 后 通过 循环 这 个 数组 从 而 得 到 每 个 元 素 ， 在 
得 到 元 素 之 后 为 其 style 属性 指定 背景 色 。 而 jQuery 通过 其 表单 选择 器 ， 可 以 用 非常 简单 的 语句 
来 实现 getElementsByTagName 实现 的 类 似 功能 ， 其 css 方法 可 以 针对 一 个 选中 的 集合 进行 操 
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作 ， 这 大 大 简化 了 需要 循环 执行 的 操作 。 
jQuery 使 用 了 CSS 的 选择 器 ， 并 且 具 有 隐 式 迭代 功能 ， 这 就 简化 了 原本 需要 循环 处 理 代码 
完成 的 操作 。 从 功能 性 上 来 说 ，jQuery 提供 了 如 下 特色 来 完成 对 网 页 的 操作 : 


@ ”快速 获取 文档 元 素 : jQuery 的 选择 机 制 构 建 于 CSS 的 选择 器 ， 它 提供 了 快速 查询 
DOM 文档 中 元 素 的 能 力 ， 而 且 大 大 强化 了 JavaScript 中 获取 页 面 元 素 的 方式 。 

@ ”提供 漂亮 的 页 面 动态 效果 : jQuery 中 内 置 了 一 系列 的 动画 效果 ， 可 以 开发 出 非常 漂亮 
的 网 页 ， 目 前 许多 知名 的 网 站 都 使 用 了 jQuery 的 内 置 效果 ， 比 如 淡 入 淡出 ， 元 素 移 除 
等 动态 特效 。 

@ ”创建 AJAX 无 刷新 网 页 AJAX 是 异步 的 JavaScript 和 XML 的 简称 ， 可 以 开发 出 非常 
灵敏 无 刷新 的 网 页 ， 特 别 是 开发 服务 器 端 网 页 时 ， 比 如 PHP 网 站 ， 需 要 往返 的 与 服务 
器 沟通 ， 如 果 不 使 用 AJAX， 每 次 数据 更 新 不 得 不 重新 刷新 网 页 ， 而 使 用 了 AJAX 特 
效 后 ， 可 以 对 页 面 进 行 局 部 刷新 ， 提 供 非 常 动态 的 效果 。 

@ ”提供 对 JavaScript 语言 的 增强 : jQuery 提供 了 对 基本 JavaScript 结构 的 增强 ， 比 如 元 素 
和 迭代 和 数组 处 理 等 操作 。 

@ ”增强 的 事件 处 理 : jQuery 提供 了 各 种 页 面 事件 ， 它 可 以 避免 程序 员 在 HTML 中 添加 太 
多 事件 处 理 代码 ， 最 重要 的 是 ， 它 的 事件 处 理 器 消除 了 各 种 浏览 器 的 兼容 性 问题 。 

@。 更改 网 页 内 容 : jQuery 可 以 修改 网 页 中 的 内 容 ， 比 如 更 改 网 页 的 文本 、 插 入 或 者 是 翻 
转 网 页 图 像 ， jQuery 简化 了 原本 使 用 JavaScript 代码 需要 处 理 的 方式 。 


jQuery 之 所 以 如 此 优秀 ， 是 因为 它 整合 了 非常 多 优秀 的 特征 ， 其 中 主要 的 有 如 下 几 个 
方面 : 
@ ”利用 CSS 的 选择 器 提供 高 速 的 页 面 元 素 查 找 行为 。 


@ ”提供 了 一 个 抽象 层 来 标准 化 各 种 常见 的 任务 ， 可 以 解决 各 种 浏览 器 的 兼容 性 问题 。 
@ 将 复杂 的 代码 精简 化 ， 提 供 连 级 编程 模式 ， 大 大 简化 了 代码 的 操作 。 


连 级 编程 模式 (Chaining Pattem) ， 人 允许 我 们 在 相同 的 元 素 上 运行 多 条 jQuery 命令 ， 一 条 接 
[ 着 另 一 条 。 这 样 的 话 ， 浏 览 器 就 不 必 多 次 查找 相同 的 元 素 了 。 


以 上 列 出 的 只 是 jQuery 的 主要 功能 ， 它 还 为 JavaScript 语言 增加 了 不 少 完善 的 特性 ， 通 过 
jQuery 完善 的 文档 可 以 获取 jQuery 更 多 的 功能 信息 。 
10.1.2 配置 jQuery 运行 环境 


为 了 开始 使 用 jQuery， 首 先 必须 从 jQuery 官网 下 载 最 新 的 jQuery 库 ，jQuery 的 官方 网 站 网 
址 如 下 : 


http://jquery.com 
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进入 官网 后 ， 位 于 右上 角 的 位 置 可 以 看 到 “Download jQuery” 按 钮 ， 如 图 10.2 所 示 。 


Ka © D jquery.com 


国有 GNLINE 


= 也 ebrua 
SjQuerv SMIT 20 70°72 


Download ”APIDocumentation ”Blog ”Plugins 


Download 
Que 
V1.11.2 or V2.1.3 


102 下 载 jQuery 库 


jQuery 是 一 个 不 断 开发 的 JavaScript 库 ， 因 此 其 版 本 也 在 不 断 地 发 生变 化 ， 可 以 看 到 
Download jQuery 下 面具 有 v1.11.2 或 v2.1.3 这 两 个 版 本 可 供 选择 下 载 。 其 中 jQuery1.x 是 jQuery 
的 旧版 本 的 升级 ，jQuery 2.x 具有 与 jQuery 1.x 相同 的 API， 但 是 不 支持 Intemet Explorer (IE) 
6/7/8 版 本 ， 因 此 一 般 建 议 下 载 jQuery 1.x。 

无 论 是 jQuery1.x 还 是 jQuery 2.x， 官 方 网 站 都 提供 了 3 个 下 载 文件 ， 如 图 10.3 所 示 。 


(GS hownloud jduery | jdue x 
€ DC D jauery. com/ dm 


best used during development or debugging; the compressed file saves bandwidth and improves 
performance in production. You can also download a Sourcemap fle for use when debugging 
with a compressed file The map fle is not required for users to run jQuery, tjust improves the 
developer's debugger experience As of jQuery 1.11.0/2 1.0 the WW Se0r cenapp neu 
comment is not included in the compressed file. 


To locally download these fies, right-click the link and select "Save as. * from the menu 
jQuery 1.x 

ThejQuery 1 x line had major changes as of jQuery 1.90. We strongly recommend that you also 
use the jQuery Migrate plugin if you are upgrading from pre-1.9 versions of JQuery or nesd to use 


plugins that havent yet been updated. Read the jQuery 1.9 Upgrade Guide and the jQuery 19 
release blog post for more information 


Download the compressed production jQuery 1.11.2 


Download the uncompressed. development iQuery 111.2 不 同 的 版 本 下 载 


Download the map file for jQuery 1.11 2 


iQuery 1 11 2 release notes 


jQuery 2.x 


图 10.3 jQuery 不 同 的 版 本 下 载 页 面 
可 以 看 到 jQuery 1.11.2 具有 3 个 可 供 下 载 的 文件 ， 分 别 是 : 
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@@ ”Production jQuery 版 : 优化 压缩 后 的 版 本 ， 具 有 较 小 的 体积 ， 主 要 用 于 部 署 网 站 时 
使 用 。 
@@ ”Development jQuery 版 : 未 压缩 版 本 ， 有 278KB 的 大 小 ， 一 般 在 网 站 建设 时 使 用 这 个 
版 本 以 便 调 试 。 
@ jQuery map 文件 : map 文件 能 够 被 用 来 在 源 代码 感知 的 浏览 器 上 调试 压缩 后 的 jQuery 
文件 ， 比 如 Google Chrome， 它 可 以 增强 调试 的 体验 ， 对 于 使 用 jQuery 的 用 户 来 说 ， 
一 般 不 需要 下 载 该 文件 。 
建议 同时 下 载 这 3 个 文件 ， 并 将 它们 放 在 一 个 统一 的 位 置 ， 这 样 可 以 在 需要 时 进行 切换 ， 将 
鼠标 悬 停 在 要 下 载 的 链接 上 ， 单 击 鼠 标 右键 从 弹出 的 菜单 中 选择 “另存 为 ”， 即 可 将 选中 的 
jQuery 文件 保存 起 来 。 
与 自行 编写 的 其 他 js 文件 一 样 ，jQuery 库 实 际 上 就 是 一 个 扩展 JavaScript 功能 的 外 部 js 文 
件 ， 因 此 引用 jQuery 库 的 方式 与 引用 其 他 的 外 部 js 文件 相似 ， 在 网 页 上 引用 jQuery 库 的 代码 如 
下 所 示 : 
<!-- 引 用 jQuery 脚本 库 --> 
<script src="jQuery/jquery-1.11.2.js" type="text/javascript" ></script> 


在 网 站 开发 阶段 ， 可 以 直接 引用 开发 版 ， 即 jquery-1.11.2js 版 本 ， 当 网 站 要 部 署 到 正式 环境 
时 ， 可 以 引用 压缩 后 的 jquery-1.11.2.min.js 版 本 ， 这 个 压缩 版 本 只 有 94K 大 小 ， 可 以 保持 网 页 尽 
可 能 地 快速 加 载 。 


10.1.3 ”使 用 Dreamweaver 编写 第 一 个 包含 jQuery 库 的 网 站 


网 站 开发 的 工具 多 种 多 样 ， 比 如 可 以 直接 使 用 记事 本 或 者 是 Notepad++ 等 工具 来 编写 网 页 ， 
但 是 这 些 工具 没有 代码 提示 功能 ， 比 如 在 编写 jQuery 代码 时 ， 如 果 能 有 一 款 具 有 jQuery 代码 提 
示 功 能 的 工具 ， 会 使 得 网 站 开发 人 员 的 开发 效率 得 到 大 幅 提升 ， 特 别 是 对 于 网 站 开发 的 初学 者 来 
说 ， 使 用 具有 代码 提示 功能 的 编辑 器 ， 可 以 让 初学 者 快速 添加 jQuery API 的 使 用 。Dreamweaver 
是 Adobe 公司 的 一 款 可 视 化 网 页 设计 工具 ， 它 原生 就 附带 了 对 jQuery 的 代码 提示 功能 ， 因 此 笔 
者 将 在 本 书 中 选用 Dreamweaver 作为 代码 编写 环境 。 

笔者 使 用 的 Dreamweaver 版 本 为 CS 6， 通 过 如 下 网 址 ， 可 以 获取 到 关于 Dreamweaver 工具 
的 更 多 详细 的 信息 : 


http://www.adobe.com/cn/products/dreamweaver.html 


接 下 来 通过 一 个 使 用 jQuery 的 网 站 示例 ， 来 演示 如 何在 Dreamweaver 中 创建 一 个 使 用 
jQuery 库 的 网 页 ， 步 骤 如 下 所 示 。 


(1) 打开 Dreamweaver， 单 击 主 菜 单 中 的 “站 点 | 新 建站 点 ”菜单 项 ，Dreamweaver 将 弹 
出 如 图 10.4 所 示 的 新 建站 点 对 话 框 。 
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es reamweayer 妆 是 网 沾 中 伯 用 的 所 各 交 人 和 后 pre 车 
ne 


您 可 以 在 此 处 为 Dreamweaver 站 点 选择 本 地 文件 夫 和 名 称 。 
站 点 名 称 : JQueryPage 
本 地 站 点 文件 夹 : [F\ 源 硒 \ 外 


图 10.4 新 建 Dreamweaver 网 站 
在 站 点 名 称 文本 框 中 ， 输 入 jQueryPage 作为 网 站 的 名 称 ， 在 本 地 站 点 文件 夹 文本 框 中 ,使 
用 右 侧 的 恕 按钮 选择 一 个 本 地 文件 夹 。 然 后 单 击 “ 保 存 ” 按 钮 。 
(2) 将 下 载 下 来 的 jQuery 复制 到 本 地 站 点 文件 夹 中 ， 现 在 的 站 点 管理 器 树 状 视图 如 图 10.5 
所 示 。 


EE i 转 | 晶 


jqueryl. 11.2.js 2T781B JSerip. 
jqueryl ll.2.nin js MB JSerip. 


10.5 ”站 点 管理 器 视图 


鼠标 右键 单 击 树 状 视图 的 根 节点 ， 也 即 “ 站 点 ”节点 ， 从 弹出 的 菜单 中 选择 “新 建文 件 ” 菜 
单项 ， 在 站 点 管理 器 中 将 新 添加 的 文件 重 命名 为 “index.html”， 双 击 该 文件 ， 在 Dreamweaver 文 
档 视 图 中 将 显示 该 文件 的 设计 视图 或 源 代码 视图 。 

(3) 切换 到 Dreamweaver 的 源 代码 视图 ， 将 光标 停 在 源 代码 的 <head> 和 </head> 之 间 的 位 
置 ， 从 站 点 管理 器 中 拖 动 jquery-1.11.2js 到 源 代码 视图 ，Dreamweaver 会 自动 添加 对 jQuery 的 引 
用 ， 如 图 10.6 所 示 。 
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10.6 添加 对 jQuery 库 的 引用 


(4) 接 下 来 通过 一 段 jQuery 的 代码 来 看 一 看 如 何在 页 面 上 使 用 jQuery 进行 网 页 元 素 的 控 
制 ， 首 先 在 页 面 的 <body> 和 </body> 之 间 放 一 个 div 元 素 ， 如 下 所 示 : 


在 <head> 和 </head> 之 间 ， 添 加 如 下 代码 来 使 用 jQuery 操纵 这 个 div 元 素 : 
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$ 表 示 当 前 使 用 的 是 jQuery 对 象 来 操纵 网 页 ， 在 <scripP> 区 域 ，$(documenb.ready 是 jQuery 
的 页 面 加 载 事 件 ， 这 个 事件 是 传统 JavaScript 中 的 window.load 事件 的 蔡 代 方法 ， 当 DOM 载 入 
就 绪 时 ， 就 会 执行 在 括号 中 定义 的 代码 ， 在 页 面 加 载 事 件 中 ， 完 成 了 如 下 几 个 工作 : 
@ ”使 用 jQuery 的 选择 器 选择 div 元 素 ， 使 用 jQuery 的 函数 css 更 改 div 的 字体 大 小 为 
9pt。 
@ ”为 页 面 上 的 div 元素 添 加 click 事件 ， 当 用 户 单 击 div 元 素 时 ， 就 会 弹出 一 个 消息 框 。 
@ 向 HTML 页 面 上 添加 一 个 新 的 div 元 素 ， 并 关联 了 click 事件 。 


至 此 这 个 示例 就 编写 完了 ， 运 行 效果 如 图 10.7 所 示 。 


站 Javascript 提醒 


欢迎 网 读 构 建 备 二 各 APP 系 列 加 书 


图 10.7 jQuery 网 页 示例 运行 效果 


在 编写 jQuery 代码 时 ， 可 以 发 现 Dreamweaver 提供 了 方便 的 代码 提醒 功能 ， 例 如 在 创建 了 
一 个 选择 器 之 后 ，Dreamweaver 将 自动 跳出 一 系列 可 供 操 作 的 方法 ， 如 图 10.8 所 示 。 


图 10.8 ”Dreamweaver 的 代码 提示 功能 
可 以 看 到 ， 像 很 多 标准 的 代码 编辑 器 一 样 ，Dreamweaver 提供 了 jQuery 的 函数 列表 ， 这 大 
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大 方便 了 对 于 jQuery 不 是 特别 熟悉 的 用 户 。 


10.1.4 认识 jQuery 对 象 


由 于 jQuery 的 代码 语法 非常 简洁 ， 而 实现 的 功能 极其 强大 ， 因 此 在 网 页 的 代码 中 经 常 
见 到 对 该 库 的 引用 。 为 了 便于 开发 人 员 能 够 快速 应 用 jQuery 库 ， 本 节 将 简要 介绍 jQuery 库 
的 基础 知识 。 


1 .jQuery 库 的 核心 方法 一 一 $() 


在 jQuery 程序 代码 中 ， 不 管 是 页 面 元 素 的 选择 、 还 是 内 置 的 功能 方法 ， 都 是 以 一 个 美元 符 
号 “$” 和 一 对 圆 括号 开始 。 其实“$0” 方 法 是 jQuery 库 中 最 重要 、 最 核心 的 方法 jQuery0 的 简 
写 ， 主 要 用 来 选择 页 面 元 素 或 执行 功能 方法 。 因 此 如 下 代码 : 


也 可 以 写成 如 下 形式 : 


查看 相关 资料 ， 可 以 发 现 jQuery() 方 法 有 7 个 重 载 ， 分 别 如 下 : 


(1) jQuery0 
上 述 方法 返回 一 个 空 的 jQuery 对 象 。 在 jQuery 1.4 版 本 之 前 ， 该 方法 会 返回 一 个 包含 
Document 节点 的 对 象 ; 但 是 在 该 版 本 之 后 ， 则 返回 一 个 空 jQuery 对 象 。 


(2) jQuery(elements) 

上 述 方法 实现 将 一 个 或 多 个 DOM 元 素 转化 为 jQuery 对 象 或 者 集合 。 

(3) jQuery(callback) 

上 述 方法 等 价 于 jQuery(document).ready(callback)， 主 要 用 来 实现 绑 定 在 DOM 文档 载 入 完成 
后 执行 的 方法 。 

(4) jQuery(expression,[context]) 

上 述 方 法 接收 一 个 包含 jQuery 选择 器 的 字符 串 ， 在 具体 执行 时 ， 会 使 用 传 入 的 字符 串 去 匹 
配 一 个 或 多 个 元 素 。 


(5) jQuery(html) 
上 述 方法 具体 执行 时 ， 会 根据 传 入 的 html 标志 代码 动态 创建 由 jQuery 对 象 封 装 的 DOM 元 素 。 
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(6) jQuery(html,props) 
上 述 方法 具体 执行 时 ， 不 仅 会 根据 传 入 的 html 标志 代码 动态 创建 由 jQuery 对 象 封装 的 
DOM 元 素 ， 而 且 还 会 设置 该 DOM 元素 的 属性 、 事 件 等 。 


(7) jQuery(html,[ownerDocument]) 

上 述 方 法 具体 执行 时 ， 不 仅 会 根据 传 入 的 html 标志 代码 动态 创建 由 jQuery 对 象 封装 的 
DOM 元 素 ， 而 且 还 会 指定 该 DOM 元 素 所 在 的 文档 。 

2 . jQuery 库 延 迟 等 待 加 载 模式 

在 jQuery 程序 代码 中 ， 为 了 让 方法 在 浏览 器 加 载 完 网 页 后 执行 ， 一 般 会 使 用 “$0” 将 方法 
进行 首尾 包 庄 ， 即 $(function0{f)。 为 什么 必须 包 庄 所 要 执行 的 方法 呢 ? 

这 是 因为 jQuery 代码 文件 是 在 <body> 标 签 元 素 之 前 加 载 ， 而 jQuery 代码 文件 里 的 方法 一 般 
需要 操作 DOM 元 素 。 为 了 让 上 述 方法 能 够 正常 执行 ， 则 必须 等 待 所 有 的 DOM 元 素 加 载 后 才能 
进行 元 素 操作 ， 于 是 就 需要 通过 “$0” 来 包 庄 方法 来 实现 延迟 等 待 加 载 功能 。 

在 JavaScript 原生 代码 里 ， 原 本 是 通过 load 事件 来 实现 延迟 等 待 加 载 ， 具 体 代码 如 下 : 

window.onload=function(){}; //JavaScript 等 待 加 载 


在 jQuery 代码 里 ， 为 了 实现 上 述 功能 ， 则 需要 通过 如 下 代码 : 


$ (document) .ready (function(){})7 //jQuery 等 待 加 载 
上 述 代 码 可 以 简写 为 : 
$ (function() {}) //jQuery 等 待 加 载 


那么 上 述 两 种 等 待 加 载 方式 有 什么 区 别 呢 ? 具体 区 别 请 见 表 10-1。 
表 10-1 延迟 等 待 加 载 区 别 


选项 window.onload $(document).ready() 


执行 时 机 ”| 必须 等 待 网 页 全 部 加 载 完 毕 ， 然 后 再 执行 包 右 代码 加 载 完毕 ， 就 能 执行 包 于 的 代码 


执行 次 数 “| 只 能 执行 一 次 ， 如 果 执 行 第 二 次 ， 那 么 第 一 次 的 执行 | 可 以 执行 多 次 ， 第 N 次 都 不 会 被 上 
会 被 覆盖 一 次 覆盖 


| 简写 方案 | 无 S(fanctionO{)) | 


在 实际 应 用 中 ， 很 少 直接 去 使 用 window.onload 事件 来 实现 延迟 等 待 加 载 ， 这 是 因为 该 事件 
所 关联 的 方法 需要 等 待 图 片 之 类 的 大 型 元 素 加 载 完毕 后 才能 执行 。 最 头疼 的 就 是 网 速 较 慢 的 情况 
下 ， 页 面 已 经 全 面 展 开 ， 而 图 片 还 在 缓慢 加 载 ， 这 时 页 面 上 任何 的 JavaScript 交互 功能 全 部 处 在 
假死 状态 。 并 且 window.onload 只 能 执行 单 次 ， 在 多 次 开发 和 团队 开发 中 会 带 来 困难 。 

3 . jQuery 对 象 与 DOM 对 复 间 的 转换 

jQuery 对 象 在 有 的 书 里 也 被 称 为 “jQuery 包装 集 ”， 是 jQuery 库 特 有 的 对 象 。 该 对 象 其 实 
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就 是 一 个 “类 ”， 不 仅 封装 了 许多 方法 ， 而 且 还 可 以 动态 地 通过 加 载 插件 扩展 类 的 功能 。 那 么 如 
何 获取 jQuery 对 象 呢 ? 非常 简单 ， 通 过 下 面 的 代码 可 以 获取 : 


可 以 发 现 ，jQuery 对 象 就 是 用 jQuery 类 库 中 选择 器 返回 的 对 象 。 
所 谓 DOM 对 象 ， 就 是 使 用 原生 JavaScript 代码 获得 的 对 象 ， 下 面 的 代码 可 获取 DOM 对象: 


对 于 jQuery 库 来 说 ，jQuery 对 象 非常 重要 ， 因 为 除了 jQuery 工具 方法 外 ，jQuery 的 操作 都 
从 jQuery 对 象 开始 。 即 只 有 获取 jQuery 对 象 后 ， 才 可 以 使 用 jQuery 库 所 提供 的 方法 。 例 如 
jQuery 对 象 上 有 一 个 获取 元 素 内 HTML 代码 的 方法 html0， 要 使 用 此 方法 首先 要 获取 jQuery 对 
象 ， 例 如 下 面 代码 : 


通过 DOM 对 象 也 可 以 实现 上 述 功能 ， 上 述 代码 等 价 于 : 


可 以 发 现在 jQuery 对 象 中 无 法 调用 DOM 对 象 的 任何 方法 ， 同 样 在 DOM 对 象 中 也 无 法 调用 
jQuery 对 象 ， 不 过 jQuery 库 提 供 的 方法 包含 了 所 有 的 DOM 操作 。 对 于 初学 者 来 说 ， 无 法 一 开 
始 就 记 住 jQuery 库 的 所 有 方法 ， 会 有 很 长 一 段 时 间 使 用 jQuery 库 方 法 配合 原始 的 DOM 方法 进 
行 开 发 。 因 此 掌握 两 种 对 象 的 转换 是 很 有 必要 的 。 

4 . jQuery 对 象 转换 成 DOM 对 象 

jQuery 对 象 是 一 个 特殊 的 数组 对 象 ， 即 使 只 有 一 个 元 素 ，jQuery 对 象 仍然 是 一 个 数组 。 之 
所 以 说 其 特殊 ， 是 因为 实际 上 jQuery 对 象 是 包含 一 个 数组 对 象 和 各 种 方法 的 类 。 而 jQuery 对 象 
的 数组 里 保存 的 是 DOM 对 象 ， 因 此 可 以 通过 索引 的 方式 将 jQuery 对 象 转换 成 DOM 对 象 ， 具 体 
语法 如 下 : 


下 面 代码 通过 索引 的 方式 实现 jQuery 对 象 向 DOM 对 象 的 转换 : 


除了 上 述 方式 可 实现 转换 外 ，jQuery 对 象 还 专门 提供 了 一 个 方法 可 将 jQuery 对 象 转换 成 
DOM 对 象 ， 具 体 语法 如 下 : 
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下 面 代码 通 过 索引 的 方式 实现 jQuery 对 象 向 DOM 对 象 的 转换 : 


5 . DOM 对 象 转换 成 jQuery 对 旬 

对 于 DOM 对 象 到 jQuery 对 象 的 转换 则 比较 简单。 只 需要 用 SO 把 DOM 对 象 包装 起 来 ， 就 
可 以 获得 一 个 jQuery 对 象 了 ， 具 体 语法 为 ; 
[ER 


下 面 代码 可 实现 DOM 对 象 到 jQuery 对 象 的 转换 : 


查看 官方 网 站 ， 可 以 发 现 “S$(elements)” 中 的 elements 参数 还 可 以 是 jQuery 对 象 ， 虽 然 将 一 
个 jQuery 对 象 再 次 转换 成 jQuery 对 象 没有 意义 ， 但 是 在 具体 开发 项 目 时 ， 如 果 确 定 不 了 一 个 对 
象 的 类 型 是 jQuery 对 象 还 是 DOM 对 象 时 ， 可 以 调用 SO 进行 转化 ， 这 样 可 以 保证 此 对 象 一 定 是 


开发 项 目 时 ， 如 果 获取 的 对 象 是 jQuery 对 象 ， 那 么 在 变量 标识 符 前 面 加 上 $， 这 样 方 | 


便 识 别 出 哪 些 是 jQuery 对 象 。 下 面 代码 创建 jQuery 对 象 : 


10.1.5 调试 jQuery 程序 


由 于 jQuery 库 始 终 是 脚本 语言 ， 因 此 没有 一 个 开发 工具 提供 调试 功能 。 不 过 值得 庆幸 的 
是 ，Firefox 和 Chrome 浏览 器 都 提供 了 程序 调试 的 功能 ， 本 节 讲 解 Chrome 浏览 器 下 的 
jQuery 调试 。 

找到 任意 一 个 引用 了 jQuery 的 HTML 文件 ， 或 者 找到 我 们 上 一 节 使 用 的 index.html 文件 ， 
鼠标 右键 单 击 文件 ， 在 弹出 的 快捷 菜单 中 选择 “打开 方式 |Google Chrome”， 这 个 时 候 在 Chrome 
浏览 器 中 显示 的 是 文件 效果 。 单 击 Chrome 的 自 定义 菜单 中 的 “工具 | 开发 者 工具 ”命令 。 默 认 效 
果 如 图 10.9 所 示 。 
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图 10.9 Chrome 中 的 开发 者 工具 界面 


中 间 一 栏 是 Chrome 的 功能 栏 ， 其 中 Sources 会 显示 本 页 面 的 源 文件 ， 包 括 所 引用 的 js 文 
件 ， 单 击 Sources 标签 ， 可 以 看 到 左 侧 列 出 了 本 页 面 的 源 文件 和 jQuery 库 文 件 ， 如 图 10.10 所 
示 。 双 击 index.html 文件 ， 就 能 看 到 该 文件 的 所 有 代码 。 我 们 在 第 21 行 添加 了 一 个 断 点 。 


D 和 1 人 jQueryx 矶 x 
© 3 CG Qhtml+css+jquery 源 代 友 /index.html 三 
EBP 


QQ 日 Bement Networ (全 imeline Profles Resources Audits Console 沁 | 和 已 | x 


Sources | Gor pe spp TU | index emi x 回 

i Hey Tp- equiVa "COntent- Iype™ Content=" text/ NtaL; ESEC=ItH-8 a 
Scscript type="text/javascript” src="jquery-1.11.2.3s">¢/scriot> 

7 各 E2015 习 /html+css*jquery mo| 6 ctitley 第 1 个 jQuery 文档 c/title> 
CE 了 <script typer"text/jayascript"> 
Fang 下//jouery 的 页 而 0 才 事件 
Ue 9 SCdecunent).ready(function(e) { 

18| SC-sasg").css("font-size",9pt")) 。。// 更 汐 di\ 元 素 的 字体 
1 // 向 div 中 ; 单 击 3 
| Semse").click(function(e) { 


313 alert(S(this) html())3 
D; 
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单 击 浏览 器 的 刷新 按钮 ， 因 为 将 断 点 添加 在 了 “文本 的 单 击 事件 ”中 ， 所 以 当 我 们 单 击 第 2 
行文 本 时 ， 就 会 中 断 程序 的 执行 ， 出 现 如 图 10.11 所 示 的 效果 。 


is ow = 
D slTiqaueoxs Ds — eo 
$C Q html+css+jquery/ 源 代码 /index.html 三 


Q 昌 


Elements Network 有 ESGRE| Timeline Profles Resources Audits Console 


>》” 闪 口 x 
Sources Content scripts Snippets | 回 indexhtml x A 


vOAfie// 了 2 Snsmsg").click(function(e) { pWatch + © ~ 
3 alert(S(this) html())3 


vO by2015 学 习 /html*css*jquey mo| 14 D; 下 Call Stack 
index html 15 // 向 页 面 上 添加 一 个 新 89div 元 素 indexhtmi21 
jquery-111.2j 36| 。 S("<divy"， 
SF 5 37 style: "font-size:9pt”, 


1/ 设置 
text;“" 单 击 这 里 更 改 颜色 "， 1/ 设置 div 的 六 时 9oey- 荆 11.23s4555 
h 
td 


1 event dispa 
2 click: ii 


号 了 quen-L11.2ja4333 

3 - fo(“body"); 1/ 将 di、 | jQueryeventadd. 
D) .appendT 1y") /将 le 

35 )); 

26| /scripty Poused on a 

7 JovoSeript 

到 | /head; breokpownt. 

38| <bodv> 了 | 了 Sope 

EI | |Local 


Pthis: div 


= »|{} Une21 coumn3 


10.11 ”Chrome 中 的 断 点 


此 时 我 们 可 以 选中 代码 中 的 “S(this)”， 鼠标 右键 单 击 选中 内 容 来 添加 Watch 监视 div 的 一 些 
属性 ， 如 果 你 还 不 知道 $(this) 是 谁 ， 也 可 以 单 击 Chrome 中 间 功 能 栏 的 Console 选项 ， 来 输出 
S$(this) 的 内 容 ， 如 图 10.12 所 示 。 


~ 
| D Wi 人 jQuery = Wl 
$C QQ html+css+jquery/ 源 代码 /index.html 


Paused in debugger I AR 


Q 日 | Hements Network Sources Timeline Profles Resources Avdits Neonsaial| 
OF <tpfame> v Presevelog 


S(this) 
【cdiv style="font-size:9pt") 单 击 这 里 更 鸡 颜 色 c/div>] 
?1 


图 10.12 在 程序 中 断 时 输出 当前 内 容 


Chrome 开发 者 工具 非常 强大 ， 这 里 我 们 只 认识 了 一 个 简单 的 设置 断 点 的 方法 ， 更 多 的 经 验 
和 技巧 需要 我 们 在 反复 的 代码 调试 中 持续 汲取 。 
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jQuery 的 选择 器 是 其 核心 功能 ， 可 以 说 是 使 用 jQuery 的 重 中 之 重 ， 只 有 灵活 地 掌握 了 选 
择 器 ， 才 能 游 思 有 余地 操纵 jQuery。 在 jQuery 中 ， 选 择 器 按照 选择 的 元 素 类 别 可 以 分 为 如 下 
4 种 : 


@ 基本 选择 器 : 基于 元 素 的 id、CSS 样式 类 、 元 素 名 称 等 使 用 基于 CSS 的 选择 器 机 制 查 
找 页 面 元 素 。 

@ ”层次 选择 器 : 通过 DOM 元 素 间 的 层次 关系 获取 页 面 元 素 。 

@ 。 过 滤 选 择 器 : 根据 某 类 过 滤 规 则 进行 元 素 的 匹配 。 它 又 可 以 细 分 为 简单 过 滤 选 择 器 、 
内 容 过 滤 选 择 器 、 可 见 性 过 滤 选 择 器 、 属 性 过 滤 选 择 器 、 子 元 素 过 滤 选 择 器 以 及 表单 
对 象 属性 过 滤 选 择 器 。 

@。 表单 选择 器 : 可 以 在 页 面 上 快速 定位 某 类 表单 对 象 。 


10.2.1 基本 选择 器 

jQuery 的 基本 选择 器 与 CSS 的 选择 器 相似 ， 它 可 以 有 如 下 3 种 类 别 : 

@ ”标签 选择 器 : 按 HTML 元 素 的 标签 名 称 进行 选择 。 

@ id 选择 器 : 取得 文档 中 指定 id 的 元 素 。 

@ ”类 选择 器 : 根据 CSS 类 来 进行 选择 。 

jQuery 还 包含 一 个 使 用 * 的 通配符 选择 器 ， 用 于 选择 所 有 的 页 面 元 素 ， 几 个 元 素 之 间 还 可 以 
进行 组 合 ，jQuery 的 基本 选择 器 的 描述 参见 表 10-2。 


表 10-2 jQuery 基本 选择 器 说 明 


名 称 说 明 
id 选择 器 根据 元 素 id 选择 3$("divId") 选择 id 为 divld 的 元 素 


标签 选择 器 根据 元 素 的 名 称 选择 S$("a") 选择 所 有 <a> 元 素 

CSS 样式 类 选择 器 | 根据 应 用 到 DOM 元 素 的 CSS 类 进行 选择 | $(".bgRed") 选择 所 用 CSS 类 为 bgRed 
的 元 素 
S$("*") 选 择 页 面 所 有 元 素 
S$("#divId, a, .bgRed") 


* 通 用 选择 器 选择 所 有 元 素 ， 使 用 通配符 * 
selectorl， 可 以 将 几 个 选择 器 用 “，” 分 隔 开 ， 然 后 
selector2， 再 拼 成 一 个 选择 器 字符 串 ， 会 同时 选中 这 
几 个 选择 器 匹配 的 内 容 


selectorN 


现在 创建 一 个 新 的 页 面 ( 参 见 源 代码 chapter10\base_selector.html 文件 )， 名 为 添加 对 jQuery 
库 的 引用 ， 接 下 来 通过 示例 来 查看 jQuery 基本 选择 器 的 作用 ，HTML 元 素 定义 如 下 。 
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【示例 10-2】 查看 jQuery 基本 选择 器 


HTML 代码 定义 了 3 个 div 和 3 个 span， 并 且 定义 了 两 个 CSS 样式 ， 接 下 来 看 一 看 如 何 通 
过 jQuery 基本 选择 器 来 实现 选择 效果 。 


1 . 标签 选择 器 

首先 必须 在 页 面 的 head 区 添加 对 jQuery 库 的 引用 ， 也 就 是 上 面 的 代码 第 05 行 ， 后 面 的 代 
码 不 再 单独 说 明 。 

接 下 来 使 用 jQuery 的 标签 选择 器 ， 选 中 所 有 的 div 标签 ， 并 将 其 字体 大 小 更 改 为 18px。 实 
现 这 个 功能 的 代码 如 下 : 


这 里 的 $("div") 就 是 选择 元 素 名 称 为 div 的 标签 选择 器 ， 上 述 代 码 会 同时 更 改 3 个 div (也 就 
是 当前 页 面 中 所 有 的 div) 的 字体 大 小 ， 因 此 运行 时 可 以 看 到 3 个 div 的 字体 的 大 小 变 成 了 
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18px。 
2 . id 选择 器 


id 一 般 用 来 表示 某 个 事物 的 唯一 性 ， 这 里 的 id 选择 器 也 就 是 只 选择 某 一 个 具体 的 元 素 。 使 
用 id 选择 器 选择 示例 中 id 为 div2 的 div， 将 其 背景 色 更 改 为 红色 ， 代 码 如 下 所 示 : 


可 以 看 到 ， 运 行 之 后 果然 第 2 个 div 已 经 更 改 了 背景 色 ， 如 图 10.13 所 示 。 


基本 选择 器 - 和 ozilla Firefox 

文件 @) ”编辑 外 查看) 历史 GE) 书签 @ 工具 GD) 帮助 0 

二 加 fle1116:/ 夭 莉 件 /trritintt 国人 C|| 加 -EEC 月 昌 民国- 会 站 -时 - 加 
站 基本 选择 器 | 


我 是 第 1 个 div 


E23 mm Vy 


我 是 革 1 个 pen 我 是 第 ?个 span 我 是 第 3 个 span 


图 10.13 使 用 这 选择 器 更 改 背景 色 


画 这 选择 器 中 ，id 前 面 必 须 跟 一 个 # 号 ， 以 表明 这 是 一 个 jQuery 的 id 选择 器 。 


3 . 类 选择 器 
在 CSS 样式 中 ， 可 以 为 某 一 类 元 素 设计 统一 的 样式 ， 设 计 的 代码 如 下 : 


上 面 是 CSS 的 类 选择 器 的 代码 。 在 HTML 页 面 中 ， 可 以 用 以 下 代码 应 用 这 个 类 ; 


如 果 要 选中 所 有 应 用 了 center 样式 的 元 素 ， 在 jQuery 中 需要 使 用 $(".center ") 形 式 。 
这 里 还 是 使 用 前 面 的 示例 代码 ， 选 择 CSS 类 为 spanclass 的 所 有 元 素 ， 将 其 字体 样式 更 改 为 
和 斜体， 实现 如 下 : 


类 选择 器 与 id 选择 器 之 间 的 不 同 在 于 类 选择 器 使 用 前 级 “.” 表 示 这 是 一 个 类 选择 器 ， 无 论 
是 类 选择 器 还 是 id 选择 器 ， 都 与 CSS 选择 器 具有 相同 的 语法 。 
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4 . 使 用 选择 器 组 合 
通过 使 用 多 个 选择 器 的 组 合 ， 可 以 同时 更 改选 中 标签 的 样式 或 内 容 ， 比 如 要 更 改 id 为 div2 
和 span2 的 元 素 ， 可 以 使 用 如 下 组 合 选择 器 : 


// 使 用 选择 器 组 合 
$("#div2,#span2") .css("background"，"#9F0") 7 


通过 在 括号 内 包含 两 个 不 同 的 选择 器 ， 就 可 以 同时 选中 两 个 不 同 的 元 素 进行 样式 设置 ， 效 果 
如 图 10.14 所 示 。 


基本 选择 器 - Wozilla Fi 
文件 编辑 下 ) Ez ET 3 工具 中 帮助 中 


过 十 Ge1116./ 书 而 戎 件 /rritint @ ”> C | 图 - BR:] 
基本 选择 器 


我 是 第 1 个 div 


图 10.14 ”使 用 选择 器 组 合 效果 
5 . 使 用 * 通 配 符 选择 器 
通配符 也 就 是 “*” 号 选择 器 ， 表 示 一 次 性 选中 页 面 上 的 所 有 元 素 ， 比 如 可 以 通过 通配符 选 
择 嚣 选中 所 有 的 元 素 ， 将 其 字体 颜色 更 改 为 红色 ， 代 码 如 下 : 


// 通 配 符 选择 器 
Sn) sot"color™ "red")s 


使 用 了 通配符 选择 器 后 ， 果 然 所 有 的 元 素 字 体 都 变 成 了 红色 ， 读 者 可 以 亲自 尝试 下 


10.2.2 ”层次 选择 器 


网 页 的 DOM 结构 表现 为 树 状 结构 ， 在 选择 元 素 时 ， 通 过 DOM 元 素 之 间 的 层次 关系 ， 可 以 
获取 到 需要 的 元 素 ， 比 如 当前 节点 的 后 代 节 点 、 父 子 关系 的 节点 、 兄 弟 关 系 的 节点 等 ， 层 次 选择 
器 的 选择 规则 如 表 10-3 所 示 。 


表 10-3 层次 关系 的 选择 规则 


ancestor descendant | 使 用 "form input" 的 形式 选中 form 中 的 所 有 | $(".bgRed div") 选择 CSS 类 为 

后 代 选 择 器 input 元 素 。 即 ancestor (祖先 ) 为 from、 bgRed 的 元 素 中 的 所 有 <div> 元 素 
descendant〔 子 孙 ) 为 input 

parent > child 选择 parent 的 直接 子 节点 child。child 必须 包含 | S(myLisP>lim 选择 CSS 类 为 myList 

父子 选择 器 在 parent 中 ， 并 且 父 类 是 parent 元 素 元 素 中 的 直接 子 节点 <i> 对 象 
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( 续 表 ) 


名 称 说 明 举例 


prev + next prev 和 next 是 两 个 同 级 别 的 元 素 。 选 中 在 prev | $("#hibiscustimg") 选 在 id 为 hibiscus 
相 邻 选择 器 元 素 后 面 的 next 元 素 元 素 后 面 的 img 对 象 


prev ~ siblings 选择 prev 后 面 的 根据 siblings 过 滤 的 元 素 5S("#someDiv-~[title]") 选择 id 为 
平 级 选择 器 注 :siblings 是 过 滤器 someDiv 的 对 象 后 面 所 有 带 有 title 
属性 的 元 素 


新 建 一 个 网 页 (参见 源 代码 chapter10\level_selector.html 文件 )， 在 该 页 面 添加 几 个 具有 层次 
关系 的 HTML 元 素 ， 具 体 代码 如 下 所 示 。 


【示例 10-3】 层次 选择 器 


在 HTML 中 使 用 ul、li 和 CSS 构建 了 一 个 下 拉 菜 单 ， 下 拉 菜 单 的 CSS 代码 可 以 参考 本 书 配 
套 光 盘 中 的 源 代码 ， 效 果 如 图 10.15 所 示 。 
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层次 选择 器 - 二 ozil1a Firefox 
文件 到 焕 提 到 坦 在 GD 历 克 加 书签 加 工具 四 天助 四 
|€ @ sO 介 vcC|| 图 -二 局 


图 10.15 HTML+CSS 菜单 效果 
在 示例 HTML 中 ， 使 用 ul 和 上 构建 了 层次 结构 的 菜单 项 ， 接 下 来 演示 层次 选择 器 的 用 法 。 


1 . 后 代 选 择 器 


使 用 后 代 选 择 器 ， 可 以 选择 祖先 下 面 的 所 有 的 子 元 素 ， 比 如 示例 中 构建 了 一 个 2 层 霸 套 的 
ul 和 1i 菜单 结构 ， 如 果 要 使 得 所 有 的 1i 字体 都 变 为 粗 体 ， 无 论 是 嵌 套 在 哪 一 个 层次 ， 可 以 使 用 
后 代 选 择 器 ， 如 下 所 示 : 


示例 中 使 用 了 后 代 选 择 器 ， 第 1 个 jQuery 选择 器 选中 所 有 的 i 元素 ， 更 改 CSS 使 字体 为 粗 
体 ， 第 2 个 后 代 选 择 器 祖先 使 用 了 id 选择 器 ， 后 代 指 定 为 ii， 祖 先 可 以 指定 不 同 的 选择 器 选择 
元 素 ， 而 后 代 需 要 指定 要 选择 的 标签 。 


2 . 父子 选择 器 


后 代 选 择 器 会 匹配 所 有 的 后 代 元 素 ， 而 父子 选择 器 只 会 匹配 当前 父 元 素 下 的 所 有 子 元 素 ， 比 
如 要 使 菜单 的 主 菜单 项 显示 14px 的 字体 ， 可 以 使 用 如 下 父子 选择 器 : 


第 1 行 是 为 了 避免 设置 了 父 类 的 i 之 后 ，CSS 会 继承 到 子 元 素 ， 因 此 为 子 元 素 单独 指定 了 
CSS， 这 样 在 设置 了 id 为 nav 的 子 元 素 1i 之 后 ， 就 可 以 看 到 项 层 菜单 果然 已 经 变 成 了 14px 的 字 
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体 ， 如 图 10.16 所 示 。 


) 层次 选择 各 - ozilla Firefox 
文件 到 编辑 下 ) 查看 如) 历史 GD) 书签 @ 工具 上 才 助 人 D 
€ 久 6e/1/ 回 说 c| 图 - 


le:1//G:/ 书 藉 答 件 /writingbook/ jQuery 插件 …p01/ jQueryDwPage/level_selector htnl# 


Ym 


10.16 ”父子 选择 器 的 效果 


与 后 代 选 择 器 不 同 的 是 ， 父 子 选择 器 只 会 选择 其 父子 关联 的 元 素 ， 而 后 代 选 择 器 会 选择 所 有 | 
| 的 子 元 素 。 


3 . 相 邻 选择 器 
相 邻 选 择 器 允许 选择 相 邻 的 元 素 ， 它 用 来 匹配 指定 元 素 后 面 的 元 素 ， 比 如 产品 三 后 面 紧 跟 的 
是 产品 四 ， 那 么 要 选中 产品 四 ， 可 以 用 产品 三 的 相 邻 选 择 器 来 进行 选择 ， 代 码 如 下 : 
$("#prodl+1i") .css ("font-style", "italic");  // 使 用 相 邻 选择 器 选择 元 素 
示例 将 相 邻 元 素 的 字体 样式 设置 为 斜体 ， 结 果 如 图 10.17 所 示 。 
) 层次 选择 器 一 了 ozilla Firefox 


文件 @) 蝙 辑 隐 ) 查看 WD 历史 人 ) 书签 人 工具 CD) 帮助 0D 
过 Bi//Q ce 


1e:1//6:/ 书 夭 糖 件 /Nyrritingbook/ jQuery 折 件 …p01/ jQueryDsPage/1evel_selector_htal# 


加 Ym 


10.17 使 用 相 邻 选择 器 


与 相 邻 元 素 选择 器 相似 的 是 next 函数 ， 它 用 来 选中 当前 元 素 的 下 一 个 元 素 ， 因 此 可 以 使 用 
next 函数 进行 替换 ， 如 下 所 示 : 
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4 . 平 级 选择 器 


与 相 邻 选择 器 不 同 的 是 ， 平 级 选择 器 会 选择 当前 元 素 的 平 级 元 素 ， 下 面 通过 一 个 例子 来 说 
明 ， 要 选择 id 为 srv2 的 所 有 平 级 元 素 ， 可 以 使 用 如 下 语句 : 


通过 选择 id 为 srv2 的 所 有 平 级 元 素 ， 可 以 看 到 所 有 出 现在 服务 二 后 面 的 菜单 项 都 变 成 了 斜 
体 ， 如 图 10.18 所 示 。 


图 10.18 ”使 用 平 级 选择 器 选择 元 素 
使 用 平 级 选择 器 有 类 似 于 nextAll 函数 的 效果 ， 因 此 可 以 替代 上 面 示例 的 语法 如 下 : 


如 果 要 选择 所 有 的 相 邻 元 素 ， 包 含 前 面 的 和 后 面 的 ， 可 以 使 用 siblings 函数 ， 如 下 所 示 : 


这 一 次 ， 除 了 服务 二 没有 变 成 斜体 之 外 ， 其 余 所 有 的 菜单 项 都 变 成 了 斜体 ， 如 图 10.19 所 示 。 


层次 选择 器 - 了 ozilla Firefox 加 加 加 
文件 四 凡 得 思 查看 国 。 历史 @) 书 答 如 ”工具 四 帮助 中 


本 ts/@@ 姜 cj] 加 -5 月 昌 区 人 -全 中- 
| 


10.19 ”所 有 相 邻 元 素 选 择 器 
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10.2.3 过滤 选择 器 


除了 基本 选择 器 和 层次 选择 器 之 外 ，jQuery 的 强大 之 处 是 可 以 通过 特定 的 过 滤 规 则 来 第 
选 出 所 需 的 DOM 元 素 ， 类 似 于 CSS 中 的 伪 类 选择 器 的 语法 。 过 滤 选 择 器 以 冒号 开头 ， 根 据 
过 滤 规 则 的 种 类 ， 又 可 以 分 为 基本 过 滤 选 择 器 、 内 容 过 滤 选 择 器 、 可 见 性 过 滤 选 择 器 、 属 性 
过 滤 选 择 器 、 子 元 素 过 滤 选 择 器 以 及 表单 对 象 属性 过 滤器 。 下 面 分 别 对 这 几 种 不 同 的 过 滤 选 
择 器 进行 介绍 。 


1 . 基本 过 滤 选 择 器 
基本 过 滤 选 择 器 也 可 以 称 为 简单 过 滤 选 择 器 ， 它 是 过 滤 选择 器 中 使 用 最 为 广泛 的 一 种 ， 主 要 
用 来 选择 首 、 尾 、 指 定 索引 、 奇 数 或 偶数 位 的 元 素 等 ， 其 选择 规则 如 表 10-4 所 示 。 


表 10-4 ”基本 过 滤 选 择 器 规则 列表 


说 明 


PE 匹配 找到 的 第 一 个 元 素 
| :as | wee 找到 的 最 后 一 个 元 素 


去 除 所 有 与 给 定 选择 器 匹配 的 元 素 

匹配 所 有 索引 值 为 奇数 的 元 素 ， 从 0 开始 计 
数 

en 匹配 所 有 索引 值 为 偶数 的 元 素 ， 从 0 开始 计 
数 

:eq(index) 匹配 一 个 给 定 索引 值 的 元 素 注 :index 从 0 开 
始 计数 

:gtindex) | 匹配 所 有 大 于 给 定 索引 值 的 元 素 
注 : index 从 0 开始 计数 

:ltlindex) | 选择 结果 集中 索引 小 于 NN 的 elements 


注 : index 从 0 开始 计数 
选择 所 有 h1、h2、h3 一 类 的 header 标签 


查找 表格 的 第 一 行 :$("tr:first") 
查找 表格 的 最 后 一 行 :$("tr:last") 


查找 所 有 未 选中 的 input 元 素 : 
S$("inputnot(:checked)") 


查找 表格 的 1、3、5... 行 :$("tr:odd ") 


查找 表格 的 2、4、6 行 :$("tr:even ") 


查找 第 二 行 :S("treq(D7) 


查找 第 二 第 三 行 ， 即 索引 值 是 1 和 2， 也 
就 是 比 0 大 :$("tr:gt(0)") 

查找 第 一 第 二 行 ， 即 索引 值 是 0 和 1， 也 
就 是 比 2 小 :$("tr:lt(2)") 

给 页 面 内 所 有 标题 加 上 背景 色 : 
S$(":header").css("background", "#EEE"); 

只 对 没有 执行 动画 效果 的 元 素 执 行动 画 
特效 : 
S("#run").click(function(){$("div:not(:anima 
ted)").animate({ left: "+=20" }, 1000); 

D; 


在 日 常 工作 中 ， 基 本 过 滤 选 择 器 比较 常用 在 表格 类 型 的 选择 上 ， 创 建 一 个 名 为 
simple filter selectorhtml 的 网 页 ， 在 网 页 上 添加 一 个 6 行 2 列 的 表格 ， 初 始 效果 如 图 10.20 所 示 。 


:header 


匹配 所 有 正在 执行 动画 效果 的 元 素 


:animated 
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习 向 单 过 涯 选择 嗓 - Hozilla Firefox 
文件 下 ” 编 要 下 ) 查看 四 历史 名 书签 @) 工具 GD) 和 助 0D 
全。 加 6。://1c:/ 乱 有 /rri @ 7” C | 加- 5E 


中 商 音 过 上 过 友 器 车 | 
表格 行 1 
表格 行 2 
表格 行 3 
表格 行 4 
表格 行 5 
表格 行 6 


图 10.20 在 应 用 jQuery 选择 器 之 前 的 效果 
先 使 用 first 和 last 选中 表格 行 的 首尾 ， 并 设置 不 同 的 颜色 ， 代 码 如 下 : 


$ ("tr:first") .css ("background", "#FF0");  // 表 格 第 一 行 显 示 黄 色 
$ ("tr:last") .css ("background", "#FCF");  ”// 表 格 的 最 后 一 行 显示 暧 红 


设置 后 的 效果 如 图 10.21 所 示 。 


) 简单 过 泪 选 择 器 一 Riozilla Firefox 
文件 中 编 缉 E) 查看 中 历史 GE) 书 符 吧 ) 工具 GD) 帮助 0 
需 ” 国 5i1e:///6:/ 书 种 略 件 /wri @ cl 图- HP wv @Il- 


图 10.21 设置 首尾 行 的 颜色 
在 设置 表格 隔行 颜色 效果 时 ，even 和 odd 是 另外 两 个 非常 有 用 的 过 滤器 ， 可 以 过 滤 出 偶数 
行 和 奇数 行 的 元 素 ， 比 如 要 对 表格 的 奇数 行 和 偶数 行 显示 不 同 的 颜色 ， 可 以 使 用 如 下 代码 : 
$ ("tr:odd ") .css ("background", "#BBBBFF"); / /表格 的 奇数 行 显示 蓝 色 
$('tr:even ').css('background', '#DADADA'); // 表 格 的 偶数 行 显示 灰色 
运行 效果 如 图 10.22 所 示 。 


2) 简单 过 滤 选 择 器 - 和 oxilla Firefox 
文件 四 ”名 锋 EE) 查看) 历史 G) 书 每 @@) 工具 GD) 吉 助 中 
ET cj 图 -5 4 户 时 加 I- 合 - 全 


1022 ”隔行 颜色 效果 
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因为 表格 的 索引 index 是 从 0 开始 ， 所 以 索引 中 的 偶数 行 实际 上 在 表格 中 看 来 是 奇数 行 ， 也 
就 是 索引 第 0 行 表示 表格 的 第 1 行 ， 索 引 第 1 行 表示 了 表格 的 第 2 行 ， 所 以 表格 的 显示 效果 
看 上 去 与 设计 效果 相反 。 如 果 表 格 添加 一 个 表 头 可 能 看 起 来 会 更 舒服 一 些 。 


在 应 用 了 even 和 odd 选择 器 之 后 ， 发 现 它们 将 前 面 使 用 first 和 last 过 滤器 设置 的 颜色 也 履 
盖 了 ， 为 了 保留 首尾 行 的 颜色 ， 可 以 使 用 not 过 滤器 ， 它 可 以 过 滤 指 定 的 行 。 过 滤 首 尾行 的 示例 
如 下 : 


使 用 了 not 过 滤器 后 ， 可 以 看 到 再 次 运行 时 首尾 行 的 颜色 果然 被 忽略 掉 了 ， 如 图 10.23 
所 示 。 


书 答 如 ”工具 民 帮助 0 
【和 ®lm 7 了 C| 国 -B51P| 时 这 "全 站 -里 ”人 


图 10.23 not 过 滤器 的 效果 


除了 first、last、even 和 odd 这 类 相对 比较 固定 的 过 滤 规 则 之 外 ， 还 可 以 使 用 eq 等 规则 ， 选 
择 特定 索引 位 置 的 元 素 ，&t 和 1t 分 别 返 回 大 于 或 小 于 指定 索引 值 的 元 素 。 

举例 来 说 ， 想 让 表格 中 的 第 4 行 背景 为 红色 ， 小 于 第 4 行 的 显示 蓝 色 ， 大 于 第 4 行 的 显示 黑 
色 ， 可 以 使 用 如 下 语句 : 


运行 效果 如 图 10.24 所 示 。 
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习 ) 简单 过 涯 选择 喜 -Mozilla Firefoz 
文件 中 编 纤 @) 查看 四 历史 G] 。 书 竹 @) 工具 @) 帮助 0 
二 团 61:1//6:/ 书 类 而 件 /yeri @ Cl 图 -到 4P| 时 沪 |- -会 内- 里 ~ 人 


图 10.24 _ eq、 时 和 上 运行 效果 


2 . 内 容 过 滤 选 择 器 
内 容 过 滤 选 择 器 可 以 根据 HTML 文本 内 容 进 行 过 滤 选 择 ， 包 含 的 过 滤 规 则 如 表 10-5 所 示 。 
表 10-5 ”内 容 过 滤器 规则 列表 


:contains(text) | 匹配 包含 给 定 文本 的 元 素 查找 所 有 包含 "John" 的 div 元 


素 :$("div:contains(John')") 
查找 所 有 不 包含 子 元 素 或 者 文本 的 空 元 
素 :$("td:empty") 

给 所 有 包含 p 元 素 的 div 元 素 添加 一 个 text 类 : 
S$("div:has(p)").addClass("test"); 

查找 所 有 含有 子 元 素 或 者 文本 的 td 元 
素 :$("td:parent") 


:empty 匹配 所 有 不 包含 子 元 素 或 者 文本 的 空 元 素 


:has(selector) 匹配 含有 选择 器 所 匹配 的 元 素 的 元 素 


:parent 匹配 含有 子 元 素 或 者 文本 的 元 素 


为 了 演示 内 容 过 滤 选 择 器 ， 新 建 一 个 名 为 content_filter_selector.html 的 网 页 ， 在 该 HTML 网 
页 中 添加 一 个 6 行 3 列 的 表格 ， 并 且 加 入 一 些 内 容 ， 初 始 效果 如 图 10.25 所 示 。 


) 内 容 过 涉 选 择 器 示例 - oxilla Firefox 
文件 @ 编辑 下 查看 W) 历史 G) 书签 @)， 工具 G) 帮助 员 
过” 于 file:/116:/H 亲 入 上 /ri 加 CI 图 -5 度 4 户 时 写 lv 合 |> 会 
| 站 内 容 过 话 选 择 器 示例 


| 向 足 道 
隧 翌 山 


| 者 秋 
| 名 的 江湖 民间 高 手 | 江 湖 闲散 人 员 ,喜欢 胡乱 杀人 ， 通 即 怕 之 。 
Ex | 亚 到 


图 10.25 内容 过 滤 选 择 器 的 初始 网 页 


接 下 来 添加 内 容 过 滤 选 择 器 的 代码 ， 读 者 可 以 打开 本 书 配套 的 源 代 码 ， 用 注释 的 方式 一 次 保 
留 一 行 来 查看 其 效果 ， 限 于 本 章 的 篇 幅 ， 这 里 列 出 了 示例 的 主要 代码 : 
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第 1 行使 用 contains 查找 表格 中 张 姓 的 人 ， 设 置 背景 为 淡 黄 ， 第 2 行 设置 单元 格 中 为 空 的 单 
元 格 的 颜色 ， 第 3 行 设置 单元 格 中 包含 段落 标记 p 的 颜色 ， 第 4 行 设置 单元 格 中 包含 文本 的 前 景 
色 ， 运 行 效果 如 图 10.26 所 示 。 


图 10.26 ”内 容 过 滤 选 择 器 运行 效果 


3 . 可 见 性 过 滤 选 择 器 
可 见 性 过 滤器 根据 元 素 是 否 可 见 来 查找 元 素 ， 它 主要 是 hidden 查找 隐藏 的 元 素 和 visible 查 
找 可 见 的 元 素 ， 其 选择 规则 如 表 10-6 所 示 。 
表 10-6 ”可 见 性 选择 器 规则 列表 


名 称 说 明 


:hidden | 匹配 所 有 的 不 可 见 元 素 ”| 查找 所 有 不 可 见 的 元 素 :$("tr:hidden") 
:visible | 匹配 所 有 的 可 见 元 素 查找 所 有 可 见 的 tr 元素 :$("tr:visible") 
:hidden 会 匹配 如 下 几 种 格式 的 元 素 : 
@@ 具有 CSS 属性 display 属性 值 为 none 的 元 素 ; 
HTML 表单 元 素 中 的 隐藏 域 即 type="hidden" 的 元 素 ; 
宽度 和 高 度 被 显示 设置 为 0 的 元 素 ; 
由 于 祖先 元 素 被 隐藏 而 导致 无 法 显示 在 页 面 上 的 元 素 。 


:visible 是 指 在 屏幕 上 占用 布局 空间 的 元 素 ， 可 见 性 元 素 的 宽度 和 高 度 大 于 0 时 显示 。 
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CSS 属性 visibility:hidden 或 者 是 opacity:0 被 认为 可 见 ， 这 是 由 于 它们 仍然 会 占用 布局 空间 ] 
如 果 在 动画 执行 期 间 隐 藏 一 个 元 素 ， 元 素 会 被 认为 可 见 直到 动画 终止 ， 在 动画 期 间 显示 一 个 | 
元 未， 元 素 在 动画 开始 时 被 认为 可 见 。 


新 建 一 个 网 页 (参见 源 代码 chapterl0\hidden_filter_selectorhtml)， 然 后 添加 几 个 隐藏 和 显示 
的 元 素 ，HTML 代码 如 下 。 


【示例 10-4】 可见 性 过 滤 选 择 器 


其 中 starthidden 类 指定 了 div 的 display 属性 为 none， 表 示 一 个 隐藏 的 div， 接 下 来 添加 如 下 
所 示 的 可 见 性 过 滤 选 择 器 代码 : 


Ee 


16 Ds 
1 
18 </script> 


代码 中 的 实现 步骤 如 下 : 


(1) 第 1 行 代码 选中 了 页 面 上 所 有 的 隐藏 元 素 ， 但 是 不 包含 script 元 素 ， 这 样 就 可 以 选取 
页 面 上 所 有 非 页 面 元 素 的 隐藏 元 素 ， 然 后 在 第 1 个 span 中 显示 找到 的 隐藏 元 素 ， 这 里 使 用 
了 :first 基本 过 滤 选 择 器 。 

(2) 第 3 行 代码 选取 隐藏 的 div 元素， 调用 jQuery 的 show 方法 动态 地 显示 隐藏 元 素 。 

(3) 第 4 行 代码 显示 隐藏 的 表单 元 素 个 数 。 

(4) 第 6 行 代 码 为 当前 显示 出 来 的 div 元 素 关联 单 击 事件 ， 在 单 击 时 将 背景 色 设 为 黄色 。 

(5) 第 10 行 代码 为 按钮 关联 事件 ， 在 事件 处 理 代码 中 ， 将 隐藏 的 div 元 素 调用 show 函数 
动画 显示 出 来 。 

运行 效果 如 图 10.27 所 示 。 


) 可 见 性 过 泪 选 择 器 -Mozilla Firefox 

文件 四 凡 缉 国 ”查看 0 历史 BE) 书 答 @) 工具 GD) 帮 肝 0 

震 。 国 61.:11/c:/ 书 乱 锌 全 /rritinteelyjtaer 二 四 Cj 图 - EXC 让 沪 加 =- 全 I- 会 内 有 | 
可 见 性 过 请 过 笃 明 


图 10.27 可 见 性 过 滤器 示例 效果 
4 . 属性 过 滤器 
属性 过 滤器 是 jQuery 中 非常 有 用 的 一 种 选择 器 ， 它 可 以 基于 HTML 元 素 的 属性 来 选择 特定 
的 元 素 ， 除 了 根据 不 同 的 属性 来 选择 元 素 ， 还 可 以 根据 不 同 的 属性 值 来 选择 元 素 ， 属 性 选择 器 的 
选择 规则 如 表 10-7 所 示 。 


表 10-7 属性 过 滤器 规则 列表 


[attribute] 匹配 包含 给 定 属性 的 元 素 查找 所 有 含有 id 属性 的 div 元 素 : 
S$("div[id]") 


[attribute=value] 匹配 给 定 的 属性 是 某 个 特 | 查找 所 有 name 属性 是 newsletter 的 input 元 素 : 
定 值 的 元 素 S$("input[name='newsletter]").attr("checked", true); 


[attribute!=value] 匹配 给 定 的 属性 是 不 包含 | 查找 所 有 name 属性 不 是 newsletter 的 input 元 素 : 
某 个 特定 值 的 元 素 S$("input[name!='newsletter]").attr("checked", true); 
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( 续 表 ) 


名 称 说 明 举例 


匹配 给 定 的 属性 是 以 某 些 | SCinputnamencnewsJ9 
值 开始 的 元 素 

匹配 给 定 的 属性 是 以 某 些 | 查找 所 有 name 以 eter 结 尾 的 input 元 素 : 
值 结尾 的 元 素 SC'inputlnameS-'eter]) 

[attribute*=value] 匹配 给 定 的 属性 是 以 包含 | 查找 所 有 name 包含 'man' 的 input 元 素 : 
某 些 值 的 元 素 S$("input[name*="man']") 


[attributeFilterl][attrib | 复合 属性 选择 器 ， 需 要 同 | 查找 所 有 含有 id 属性 并 且 name 属性 是 以 man 结尾 
uteFilter2][attributeFilt | 时 满足 多 个 条 件 时 使 用 的 元 素 : 
erN] S("input[id][name$=man']") 


由 表 中 可 以 看 到 ， 属 性 过 滤器 不 仅 可 以 根据 属性 名 称 进行 选择 ， 还 可 以 根据 属性 与 属性 值 的 
匹配 规则 来 选择 元 素 。 接 下 来 创建 一 个 页 面 (参加 源 代码 
chapter10\attribute_filter_selector.html)， 在 该 页 面 上 添加 几 个 HTML 元 素 ， 然 后 在 JavaScript 代码 
块 中 使 用 属性 过 滤器 来 选择 元 素 ， 如 下 所 示 。 


【示例 10-5】 属性 过 滤器 


在 HTML 的 body 区 ， 定义 了 4 个 div 元 素 ， 分 别 为 前 3 个 div 指定 了 不 同 的 id， 并 且 具 有 
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一 个 无 任何 属性 的 div 元 素 ， 在 JavaScript 代码 部 分 ， 分 别 使 用 了 属性 过 滤 选 择 器 的 不 同 设置 来 


选择 元 素 并 且 设置 其 颜色 或 者 是 字体 ， 运 行 效果 如 图 10.28 所 示 。 


属性 过 涛 选择 器 - Hozilla Firefoz 
文件 中 编辑 有 查看 WD 历史 E) 书 答 @) 工具 中 
€ Oi/O 


Ey 


轩 


< 图 -5 时 区 |- @l- 会 内 ”时 


图 1028 属性 选择 器 运行 效果 
5 . 子 元 素 过 滤器 


这 个 过 滤器 是 指 根据 父 元 素 中 的 某 些 过 滤 规 则 来 选择 子 元 素 ， 例 如 可 以 选择 父 元 素 的 第 1 个 
子 元 素 (:first-child) 或 者 最 后 1 个 子 元 素 (:last-child) 或 者 父 元 素 中 特定 位 置 的 子 元 素 ， 其 规 


则 如 表 10-8 所 示 。 
表 10-8 子 元 素 过 滤器 规则 列表 
名 称 
:nth- 匹配 其 父 元 素 下 的 第 N 个 子 元 素 或 奇偶 元 素 在 每 个 由 查找 第 2 个 正 
child(index/even/odd/equati | “eq(index) 只 匹配 一 个 元 素 ， 而 这 个 元 素 将 为 每 | $("ullinth-child(2)") 
on) 一 个 父 元 素 匹 配子 元 素 :nth-child 是 从 1 开始 ， 
而 :eq0 是 从 0 算 起 的 。 
可 以 使 用 : 
:nth-child(even) 
:nth-child(odd) 
:nth-child(3n) 
:nth-child(2) 
:nth-child(3n+1) 
:nth-child(3n+2) 
:first-child 匹配 第 一 个 子 元 素 ; 在 每 个 ul 中 查找 第 一 个 
'first 只 匹配 一 个 元 素 ， 而 此 选择 符 将 为 每 个 父 | 正 
元 素 匹配 一 个 子 元 素 SC"ul li:first-child") 
:last-child 匹配 最 后 一 个 子 元 素 ; 在 每 个 ul 中 查找 最 后 一 
"lat 只 匹配 一 个 元 素 ， 而 此 选择 符 将 为 每 个 父 | 个 正 
元 素 匹 配 一 个 子 元 素 S$("ul li:last-child") 
:only-child 匹配 父 元 素 中 唯一 的 子 元 素 ; 在 Ul 中 查找 是 唯一 子 元 
如 果 父 元 素 中 含有 其 他 元 素 ， 那 将 不 会 被 匹配 。 | 素 的 庄 
S$("ul li:only-child") 


nth_child 可 以 根据 指定 的 索引 位 置 、 奇 数位 、 偶 数位 等 来 匹配 元 素 ， 这 个 选择 规则 常用 来 
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选择 某 些 特定 集合 性 质 的 元 素 中 的 子 元 素 ， 接 下 来 创建 一 个 网 页 (参见 源 代码 
chapter10\child_filter_selector.html)， 在 其 中 添加 一 个 5 行 4 列 的 HTML 表格 。 来 看 一 下 jQuery 
的 子 元 素 过 滤器 如 何 选 择 其 中 的 元 素 。 


【示例 10-6】 子 元 素 过 滤器 


第 1 个 选择 器 使 用 的 是 索引 选择 器 ， 这 将 使 得 它 选择 表格 行 的 第 2 个 单元 格 ， 也 就 是 第 2 列 
显示 为 绿色 ; 第 2 个 和 第 3 个 使 用 偶数 和 奇数 选择 器 选择 偶数 和 奇数 单元 格 设置 颜色 ;第 4 个 和 
第 5 个 选择 器 选择 表格 的 第 1 行 和 最 后 一 行 设置 背景 色 ， 最 后 一 个 选择 器 选择 具有 p 元 素 的 单元 
格 ， 运 行 效果 如 图 10.29 所 示 。 


OCR 
[S/n /mn © c] 国 -可 :PS -OO-N "ni-o 
2 


图 10.29 子 元 素 过 滤器 的 示例 效果 
如 果 注释 奇数 和 偶数 选择 器 ， 则 可 以 看 到 第 4 个 和 第 5 个 选择 器 的 效果 ， 如 图 10.30 所 示 。 
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图 10.30 首尾 行 的 选择 效果 
6 . 表单 对 象 属性 过 滤器 
这 种 类 型 的 过 滤器 可 以 根据 表单 中 某 对 象 的 属性 特征 来 获取 表单 元 素 ， 比 如 表单 元 素 的 
enabled、disabled、selected 以 及 checked 属性 ， 其 过 滤 规则 如 表 10-9 所 示 。 
表 10-9 表单 对 象 属性 过 滤器 规则 列表 
名 称 说 明 


匹配 所 有 可 用 元 素 查找 所 有 可 用 的 input 元 素 :SCvinputenabled) 
匹配 所 有 不 可 用 元 素 查找 所 有 不 可 用 的 input 元 素 :$C"input:disabled") 


:checked | 匹配 所 有 被 选中 元 素 〈 复 选 框 、 单 选 框 | 查找 所 有 选中 的 复 选 框 元 素 :S("inputichecked") 
等 ， 不 包括 select 中 的 option) 
匹配 所 有 选中 的 option 元 素 查找 所 有 选中 的 选项 元 素 :SC'select option:selected") 


可 以 看 到 ， 使 用 表单 对 象 属性 过 滤器 ， 可 以 对 表单 中 控件 元 素 的 可 用 (enabled)、 不 可 用 
(disabled)，Checkbox 控件 的 选择 〈checked ) 与 select 控件 的 选中 selected) 这 些 属性 进行 设 
置 ， 这 使 得 在 开发 表单 时 可 以 快速 地 选中 所 需要 的 控件 。 

新 建 一 个 网 页 (参见 源 代码 chapter10\form_filter_selector.html)， 然 后 在 该 网 页 中 构建 一 个 表 
单 ， 效 果 如 图 10.31 所 示 。 


雪 单 尾 性 选择 器 - Eozilla Firefor 
文件 中 丹 辑 也) 坦 看 中 历史 G) 书 答 @)， 工具 ID 帮助 史 


2 Sj 图 -5 月 时 加 |- 会- 会 个 -车 


10.31 表单 界面 


由 图 中 可 以 看 到 ， 这 个 表单 包含 了 两 个 单 选 框 ， 用 来 供用 户 选 择 性 别 ， 一 个 select 下 拉 列 表 
框 ， 供 用 户 选择 学 历 ; 两 个 禁用 掉 的 input 控件 ， 接 下 来 看 一 看 如 何 使 用 表单 属性 过 滤器 来 选择 
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元 素 ， 如 下 所 示 。 
【示例 10-7】 表单 对 象 属性 过 滤器 


在 ready 事件 主体 中 ， 代 码 完成 的 功能 分 别 如 下 所 示 : 


(1) 第 1 行 和 第 2 行 代码 ， 分 别 使 用 enabled 和 disabled 来 选中 禁用 和 启用 的 input 控件 ， 
然后 使 用 css 函数 来 设置 其 背景 色 。 

(2) 第 3 行 代码 使 用 attr 将 已 经 被 禁用 掉 的 input 控件 设置 为 enabled， 即 将 disabled 属性 设 
置 为 false。 

(3) 第 4 行 代码 为 具有 checked 属性 的 控件 关联 了 click 事件 。 

(4) 最 后 一 行 代码 将 select 控件 中 option 集合 具有 selected 属性 的 元 素 的 背景 色 更 改 为 黄色 。 


应 用 了 表单 属性 过 滤 选 择 器 的 效果 如 图 10.32 所 示 。 


文件 四 ” 编 儿 如 查看 轨 历史 同 书生 如。 工具 四 才 助 
[全 Bo/ O 7 C 国 - 经 月 最 相 |- @l- 会 和 -对 -人流 


本 四 
姓名 : ES | 
性 别 : @ 昂 〇 女 
学 历 : 


EA = 
10.32 表单 属性 过 滤器 应 用 效果 


可 以 看 到 根据 表单 的 属性 设置 来 选择 表单 的 功能 确实 比较 强大 。 
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10.2.4 表单 选择 器 
在 学 过 表单 属性 过 滤器 之 后 ， 来 看 一 看 jQuery 的 表单 选择 器 ， 表 单 选择 器 提供 了 灵活 的 方 
法 来 选择 表单 中 的 元 素 。 举 例 来 说 ， 如 果 要 统一 为 表单 中 的 input 控件 设置 样式 或 者 是 属性 ， 使 
用 表单 选择 器 可 以 快速 一 次 到 位 地 进行 设置 ，jQuery 中 可 供 使 用 的 表单 选择 器 如 表 10-10 所 示 。 
表 10-10 ”表单 选择 器 规则 列表 

说 明 解释 

匹配 所 有 input、textarea、select 和 button 元 素 查找 所 有 的 input 元 素 : 
S$(":input") 


查找 所 有 重 置 按钮 : 
S$(":reset") 
查找 所 有 按钮 : 
S$(":button") 
查找 所 有 文件 域 : 
S$(":file") 


可 以 看 到 ， 表 单 选择 器 可 以 匹配 当前 文档 或 者 是 某 一 个 表单 内 部 的 所 有 表单 元 素 ， 比 如 可 

以 同时 选中 所 有 的 按钮 或 者 是 输入 框 。 下 面 以 上 一 小 节 中 创建 的 表单 为 例 ， 演 示 一 下 表单 选择 器 
的 使 用 效果 ， 新 建 一 个 名 为 form_selector.html 的 网 页 ， 然 后 复制 上 一 小 节 中 创建 的 表单 HTML 
代码 ， 接 下 来 添加 如 下 代码 使 用 表单 选择 器 来 选择 表单 中 的 元 素 。 

01 <script type="text/javascript" src="../jquery-1.11.2.js"></script> 

02 <script type="text/javascript"> 

03 $ (document) .ready (function (e) { 

04 $(":input") .css("background", "#FFC"); // 设 置 所 有 input 元 素 的 背景 色 

05 $(":text") .hide(3000); // 隐 藏 所 有 文本 框 对 象 
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整个 代码 由 如 下 几 个 选择 器 组 成 : 


(1) 选中 文档 界面 中 的 所 有 的 input 元素， 设置 其 背景 色 为 黄色 。 


(2) 用 了 两 个 text 选择 器 ， 选 中 所 有 的 文本 框 对 象 ， 先 使 用 hide 函数 让 其 动态 隐藏 ， 然 后 
使 用 show 函数 让 其 慢 慢 显示 。 


(3) 使 用 两 个 password 选择 器 ， 先 隐藏 所 有 的 密码 文本 框 元 素 ， 然 后 显示 所 有 的 密码 框 元 素 。 
(4) 为 网 页 上 所 有 的 按钮 指定 字体 为 加 粗 显 示 。 
(5) 为 网 页 上 所 有 的 单 选 按钮 设置 背景 色 。 


使 用 了 表单 选择 器 的 页 面 效果 如 图 10.33 所 示 。 


表单 选择 器 一 ozilla Firefox 
文件 区 丹 辑 电 坦 看 响 历史 GE) 书 苦 @ 工具 0 帮助 如 
OC| 国 -5 月 是 区- 上 -会 站 -点 - 仿 
让 替 单 渴 控 器 此 
姓名 
性 别 : 
学 历 : 


用 户 名 : 
密码 : 


图 10.33 表单 选择 器 效果 


在 运行 时 可 以 看 到 ， 文 本 框 会 慢 慢 地 隐藏 和 显示 ， 这 是 jQuery 的 hide 和 show 这 两 个 函数 
的 效果 ， 这 两 个 函数 可 以 动态 显示 和 隐藏 页 面 上 的 元 素 ， 在 实际 的 工作 中 非常 有 用 。 


1 0.3 用 jQuery 来 操作 DOM 


在 使 用 JavaScript 编写 网 页 代码 的 过 程 中 ， 多 数 时 间 都 在 操纵 DOM， 比 如 Ajax 返回 的 json 
数据 、 动 态 向 DOM 添加 显示 节点 ， 或 者 是 动态 更 改 页 面 上 元 素 的 CSS、 属 性 等 。DOM 的 全 称 
是 “Document Object Model”， 即 文档 对 象 模型 ， 它 是 一 种 与 浏览 器 、 平 台 和 语言 无 关 的 接口 ， 
它 可 以 让 用 户 代码 访问 任何 浏览 器 中 呈现 的 元 素 ， 可 以 将 DOM 看 作 是 网 页 呈现 的 一 种 标准 。 
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要 使 用 jQuery 操纵 DOM， 必 须 先 使 用 选择 器 选中 一 个 或 多 个 元 素 ， 由 于 jQuery 是 对 结果 
集 进 行 隐 式 达 代 的 操作 ， 因 此 一 个 jQuery 对 象 可 以 同时 对 多 个 元 素 进行 属性 更 改 。 

获取 和 设置 属性 应 使 用 jQuery 的 attr 方法 ， 而 移 除 属性 应 使 用 removeAttr 方法 ， 其 中 获取 
元 素 属性 的 attr 语法 如 下 所 示 : 


其 中 selector 是 jQuery 的 选择 器 ，attr 中 的 参数 attribute 是 指定 要 获取 的 元 素 的 属性 名 称 ， 
举 个 简单 的 例子 ， 要 想 获取 图 像 的 地 址 ， 可 以 使 用 如 下 语句 。 


新 建 一 个 网 页 (参见 源 代码 chapterl0\get_set_attributes.html)， 在 这 个 网 页 中 来 演示 如 何 获取 
DOM 元 素 的 属性 值 ，HTML 元 素 如 下 所 示 。 


【示例 10-8】 ”获取 DOM 元 素 的 属性 值 


在 这 里 构建 了 一 个 菜单 ， 用 作 网 站 的 导航 栏 ，id 为 btn_getattr 的 按钮 将 获取 页 面 上 的 DOM 
的 不 同 的 属性 值 ， 代 码 如 下 所 示 。 
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在 示例 代码 中 ， 使 用 attr 分 别 获取 了 4 个 HTML 元 素 的 属性 值 ， 保 存 到 str 字符 串 中 ， 通 过 
运行 可 以 看 到 不 同 的 属性 的 值 已 经 成 功 地 显示 在 页 面 上 ， 如 图 10.34 所 示 。 


10.34 ”获取 DOM 元 素 的 属性 值 


10.3.2 ”修改 元 素 内 容 
有 3 个 方法 可 以 用 于 获取 HTML 元 素 的 内 容 ， 分 别 是 : 


@ text0: 设置 或 返回 所 选 元 素 的 文本 内 容 ; 
@ html0: 设置 或 返回 所 选 元 素 的 内 容 (包括 HTML 标记 ) ; 
@ val0: 设置 或 返回 表单 字段 的 值 。 


text 和 html 的 明显 区 别 是 text 只 返回 元 素 的 文本 内 容 ， 而 html 返回 的 是 将 HTML 解析 后 的 
内 容 ，val 返回 的 是 表单 的 内 容 。 新 建 一 个 网 页 (参见 源 代码 chapterl0\get_set_content.html)， 在 
该 网 页 中 添加 如 下 HTML 代码 。 
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【示例 10-9】 ”修改 元 素 内 容 


在 HTML 中 放置 了 一 个 id 为 test 的 p 元素 ， 在 段落 内 部 设置 了 一 些 HTML 代码 ， 在 段落 下 
面 添加 一 个 textarea 元 素 ， 用 于 显示 文本 的 btn1 和 显示 HTML 的 btn2。 接 下 来 对 bml 编写 代 
码 ， 使 其 获取 p 元 素 内 部 的 文本 内 容 ， 并 显示 到 textarea 中 。btn2 将 显示 HTML 内 容 到 textarea 
元 素 ， 这 两 个 按钮 的 事件 处 理 实现 如 下 。 


按钮 btnl 用 于 使 用 text 获取 了 段落 的 文本 内 容 ， 并 显示 到 textarea 中 ， 显 示 效 果 如 图 10.35 
所 示 。 


ry 


IA 
”cj 加 -se 月 


: 
vo OF 
3 个 及 技 本 月 ， 
人 
html O， 设 是 志江 Es wn, AD 
Yal0， 设 羡 式 返回 表单 字 | 


10.35 ”显示 文本 内 容 
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可 以 见 到 即便 段落 标记 内 部 包含 了 HTML 字符 串 ，textO 仅 仅 只 是 取出 其 中 的 文本 内 容 ， 在 
为 textarea 赋值 时 ， 也 使 用 了 带 参数 的 text 函数 ， 这 个 参数 将 作为 文本 内 容 设 置 给 textarea， 因 此 
在 textarea 中 显示 了 HTML 文本 内 容 。 

btn2 按钮 使 用 了 html() 方 法 ， 用 来 获取 HTML 格式 的 内 容 ， 其 输出 结果 如 图 10.36 所 示 。 


有 3 个 方 糙 可 以 用 于 联 职 <gt 要 </strong> 的 内 容 、 分 别 景 ，<br> 
《streng)text()， 设 置 或 提问 | 上 直人 全 
《ptrang>html O， 站 元 束 的 内 容 〈 包 揪 FTEL 标记 )》</strong>Cbr>》 


《atrongyval () ， 设 置式 返 | 字 据 的 值 </strone>cbr> 


了 二] [有 


图 10.36 显示 HTML 内 容 


html0 方 法 显示 了 段落 标签 中 的 HTML 元 素 ， 可 以 看 到 它 包含 了 HTML 标记 ， 同 样 如 果 为 
html() 方 法 带 了 一 个 参数 ， 表 示 将 为 指定 的 目标 元 素 设置 HTML 内 容 ， 比 如 可 以 编写 如 下 代码 。 


为 id 为 test2 的 div 设置 HTML 内 容 ， 这 样 就 可 以 动态 为 div 添加 新 的 HTML 内 容 。 


10.3.3 ”动态 创建 内 容 


jQuery 还 允许 开发 人 员 动 态 为 页 面 添加 内 容 ， 类 似 于 JavaScript 语言 中 的 CreateElement， 
jQuery 动态 创建 HTML 元 素 使 用 工厂 函数 $0 实现 ， 语 法 如 下 。 


其 中 参数 html 是 要 动态 创建 的 HTML 标记 ， 它 会 动态 创建 一 个 DOM 对 象 ， 但 是 这 个 
DOM 对 象 并 没有 添加 到 DOM 对 象 树 中 ， 可 以 使 用 如 下 几 个 jQuery 函数 来 将 其 添加 到 DOM 对 
象 树 。 


append(): 在 被 选 元 素 的 结尾 插入 内 容 ; 
prepend(): 在 被 选 元 素 的 开头 插入 内 容 ; 
after(): 在 被 选 元 素 之 后 插入 内 容 ; 
before(): 在 被 选 元 素 之 前 插入 内 容 。 


在 下 一 小 节 会 介绍 这 些 方法 的 具体 使 用 方式 ， 本 小 节 主 要 关注 如 何 使 用 工厂 方法 80 来 动态 
创建 页 面 元 素 ， 举 个 例子 ， 要 向 页 面 上 插入 一 个 新 的 div 元 素 ， 可 以 使 用 如 下 语句 。 
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可 以 看 到 ， 在 工厂 函数 SO 中 不 仅 可 以 指定 要 创建 的 标签 ， 还 可 以 为 其 设置 各 种 不 同 的 属 
性 ， 最 后 的 appendTo 将 这 个 新 创建 的 div 元 素 添加 到 页 面 中 。 


10.3.4 动态 插入 节点 


动态 创建 的 节点 如 果 不 插入 到 DOM 对 象 树 中 ， 那 么 是 不 会 在 页 面 中 呈现 的 ， 要 动态 插入 节 
点 ， 可 以 使 用 如 表 10-11 所 示 的 几 种 方法 。 


表 10-11 动态 插入 方法 列表 


方法 名 称 方法 描述 


append() 方法 在 被 选 元 素 的 结尾 〈 仍 然 在 内 部 ) 插入 指定 内 容 

appendTo() 方法 在 被 选 元 素 的 结尾 (仍然 在 内 部 ) 插入 指定 内 容 

prependO 方法 在 被 选 元 素 的 开头 〈 仍 位 于 内 部 ) 插入 指定 内 容 

prependTo0 方法 在 被 选 元 素 的 开头 〈 仍 位 于 内 部 ) 插入 指定 内 容 

after0) 在 被 选 元 素 后 插入 指定 的 内 容 

before0) 在 被 选 元 素 前 插入 指定 的 内 容 

insertAfter() 把 匹配 的 元 素 插入 到 另 一 个 指定 的 元 素 集合 的 后 面 

insertBefore() 把 匹配 的 元 素 插入 到 另 一 个 指定 的 元 素 集合 的 前 面 

| 
和 选择 器 的 位 置 。 


接 下 来 新 建 一 个 页 面 (参见 源 代码 chapterl0\insert_elements.html)， 在 其 中 添加 如 下 HTML 
代码 。 


【示例 10-10】 ”动态 插入 节点 
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代码 中 构建 了 多 个 不 同 的 按钮 ， 其 中 每 个 按钮 将 对 应 一 种 不 同 的 插入 方法 ， 为 每 个 按钮 关 
联 的 事件 处 理 语句 如 下 所 示 。 


jQuery 入 门 
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可 以 看 到 ， 每 个 按钮 的 事件 处 理 代码 中 分 别 调用 了 不 同 的 插入 方法 ， 通 过 这 个 示例 可 以 看 到 
各 种 不 同 的 插入 语句 的 使 用 方式 和 语法 结构 ， 比 如 append 和 appendTo 以 及 prepend 和 
prependTo 就 只 是 选择 器 的 不 同 ， 示 例 的 运行 效果 如 图 10.37 所 示 。 


文件 中。 编辑 到 ) 查看 W) 历史 E) 书签 @ ”工具 中 帮助 中 
[€ Bi//c/PNHAO "Cl 国 -5 月 时 还 -加 -全 站- 台 |- 全 


图 10.37 不 同 的 插入 语句 的 示例 效果 


10.3.5 “动态 删除 节点 


从 网 页 上 删除 节点 也 是 日 常 工作 中 经 常 遇 到 的 一 种 操作 ，jQuery 提供 了 两 个 可 以 用 来 从 
DOM 元 素 树 中 移 除 节点 的 方法 ， 分 别 是 : 


@ remove() 方 法 : 用 来 删除 指定 的 DOM 元 素 ， 它 会 将 节点 从 DOM 元 素 树 中 移 除 ， 但 是 
会 返回 一 个 指向 DOM 元 素 的 引用 ， 因 此 它 并 不 是 将 jQuery 引用 到 的 元 素 对 象 删除 ， 
可 以 通过 这 个 引用 来 继续 操作 元 素 。 

@ empty() 方 法 : 该 方法 也 不 会 删除 节点 ， 只 是 清空 节点 中 的 内 容 ，DOM 元 素 依然 保持 在 
DOM 元 素 树 中 。 


remove() 方 法 会 将 元 素 从 DOM 对 象 树 中 移 除 ， 但 是 不 会 把 引用 了 这 些 对 象 的 jQuery 对 象 删 
除 ， 因 此 还 是 可 以 使 用 jQuery 对 象 来 进行 一 些 操作 ， 而 empty 只 是 将 元 素 中 的 内 容 进行 清空 。 
接 下 来 创建 一 个 网 页 (参见 源 代码 chapter10\dynamic_remove.html)， 向 其 中 插入 一 些 HTML 元 
素 ， 然 后 分 别 演示 使 用 remove 和 empty 的 效果 ，HTML 定义 如 下 所 示 。 


【示例 10-11】 ”使 用 remove 和 empty 的 效果 
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在 body 区 ， 可 以 看 到 放 了 3 个 div 用 来 显示 消息 ， 另 外 两 个 div 中 放置 了 两 个 按钮 ， 分 别 
用 来 调用 remove 方法 和 empty 方法 ， 这 两 个 按钮 的 事件 处 理 代 码 如 下 所 示 。 


remove 按钮 内 部 ， 调 用 了 remove 方法 ， 尽 管 这 个 元 素 已 经 从 DOM 中 移 除 了 ， 但 是 jQuery 仍 
然 引 用 着 这 个 对 象 ， 因 此 又 可 以 将 其 添加 到 body 中 ， 使 之 经 历 了 删除 又 添加 的 过 程 。empty 只 是 清 
除了 DOM 中 的 内 容 ， 又 重新 向 div 中 添加 了 元 素 ， 单 击 两 个 按钮 后 的 效果 如 图 10.38 所 示 。 


[| 图- 5& 月 


图 10.38 移 除 元 素 后 的 效果 


10.4 jQuery 的 事件 


jQuery 也 扩展 了 JavaScript 的 事件 处 理 机 制 ， 不 仅 提供 了 更 加 简洁 的 处 理 语法 ， 同 时 也 具有 
更 好 的 兼容 性 ， 这 使 得 开发 人 员 使 用 jQuery 的 事件 处 理 后 ， 就 不 用 再 担心 各 种 不 同 的 浏览 器 之 
间 的 兼容 性 了 。 
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10.4.1 什么 是 事件 


所 谓 事件 ， 就 是 被 对 象 识别 的 操作 ， 即 操作 对 象 对 环境 变化 的 感知 和 反应 ， 例 如 单 击 按钮 或 
者 敲 击 键盘 上 的 按键 。 所 谓 事件 流 ， 是 指 由 于 HTML 文档 使 用 的 是 DOM 模型 ， 而 该 模型 是 从 
上 到 下 一 级 一 级 的 结构 ， 因 此 就 会 触发 一 连 串 的 对 象 。 例 如 单 击 HTML 页 面 上 的 某 个 按钮 时 ， 
不 仅 会 触发 该 按钮 的 单 击 事件 ， 还 将 触发 安装 所 属 容器 〈div) 的 单 击 事件 ， 同 时 还 将 触发 父 级 
别 容器 的 单 击 事件 ， 直 到 body、html 和 document。 

这 种 一 个 操作 就 会 造成 一 连 串 的 事件 触发 ， 就 会 形成 一 个 事件 流 。 所 谓 冒 泡 型 事件 流 ， 就 是 
事件 激活 顺序 是 从 出 发 点 元 素 开始 向 上 层 逐 级 冒 泡 直 到 document 为 止 。 在 上 面 单 击 按钮 的 例子 
中 ， 首 先 会 触发 按钮 的 单 击 事件 ， 接 着 再 触发 容器 div 的 单 击 事件 ， 再 触发 body 的 单 击 事件 ， 
再 触发 html 的 单 击 事件 ， 最 后 触发 document 的 单 击 事件 。jQuery 库 对 事件 的 支持 ， 也 采用 冒 泡 
型 事件 流 。 


10.4.2 jQuery 所 支持 的 事件 和 事件 类 型 


JavaScript 虽然 提供 了 非常 强大 的 事件 机 制 ， 但 是 由 于 浏览 器 处 理事 件 机 制 的 差异 ， 在 编写 
JavaScript 程序 时 不 得 不 编写 很 多 代码 以 满足 各 种 浏览 器 之 间 的 兼容 性 需求 。 万 幸 的 是 ，jQuery 
库 对 JavaScript 中 的 事件 进行 封装 ， 不 必 再 考虑 各 种 浏览 器 的 差异 。 

为 了 使 开发 者 更 加 方便 地 绑 定 事件 ，jQuery 库 封装 了 JavaScrmpit 常用 的 事件 以 便 省 略 更 多 的 
代码 ， 这 些 事件 被 称 为 简单 事件 ， 关 于 简单 事件 的 绑 定 方法 请 见 表 10-12。 

表 10-12 简单 事件 绑 定 方法 


方法 名 描述 

click(fn) 触发 每 一 个 匹配 元 素 的 click 〈 单 击 ) 事件 
dblclick(fn) 触发 每 一 个 匹配 元 素 的 dblclick 双击) 事件 
mousedown(fh) 触发 每 一 个 匹配 元 素 的 mousedown ( 单 击 后 ) 事件 
mouseup(fh) 触发 每 一 个 匹配 元 素 的 mouseup〈 单 击 弹 起 ) 事件 
mouseover(fh) 触发 每 一 个 匹配 元 素 的 mouseover (鼠标 移入 ) 事件 
mouseout(fn) 触发 每 一 个 匹配 元 素 的 mouseout 〈 鼠 标 移出 ) 事件 
mousemove(fn) 触发 每 一 个 匹配 元 素 的 mousemove (鼠标 移 动 ) 事件 
mouseenter(fh) 触发 每 一 个 匹配 元 素 的 mouseenter〔 鼠 标 穿 过 ) 事件 
mouseleave(fn) 触发 每 一 个 匹配 元 素 的 mouseleave〈 鼠 标 穿 出 ) 事件 
keydown(fn) 触发 每 一 个 匹配 元 素 的 keydown 键 盘 按 下 ) 事件 
keyup(fh) 触发 每 一 个 匹配 元 素 的 keyup〔 键 盘 按 下 弹 起 〉 事件 
keypress(fh) 触发 每 一 个 匹配 元 素 的 keypress 键盘 按 下 ) 事件 
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( 续 表 ) 


unload(fn) 当 印 载 本 页 面 时 绑 定 一 个 要 执行 的 方法 

resize(fn) 触发 每 一 个 匹配 元 素 的 resize (文档 改变 大 小 ) 事件 
scroll(fn) 触发 每 一 个 匹配 元 素 的 scroll (滚动 条 拖 动 ) 事件 
focus(fn) 触发 每 一 个 匹配 元 素 的 fpcus 〈 焦 点 激活 ) 事件 


触发 每 一 个 匹配 元 素 的 blur( 焦 点 丢失 ) 事件 
触发 每 一 个 匹配 元 素 的 focusin 焦点 激活 ) 事件 
触发 每 一 个 匹配 元 素 的 focusout (焦点 丢失 ) 事件 
触发 每 一 个 匹配 元 素 的 select (文本 选 定 ) 事件 
触发 每 一 个 匹配 元 素 的 change〈 值 改变 ) 事件 
触发 每 一 个 匹配 元 素 的 submit (表单 提交 ) 事件 


blur(fh) 


focusout(fn) 


submit(fn) 


除了 上 述 简单 事件 外 ，jQuery 库 还 组 合 一 些 简单 事件 合成 复合 事件 ， 比 如 切换 功能 、 智 能 


加 载 等 。jQuery 库 所 支持 的 复合 事件 请 见 表 10-13。 
表 10-13 复合 事件 
方法 名 描述 


当 DOM 加 坟 守 级 发 事 人 


当 委 村 移入 触发 第 一 个 i， 移出 角 发 2 
当 痕 标 间 地 发 1 再 单 击 角 人 2 


在 具体 使 用 事件 时 ， 如 果 想 要 在 事件 处 理 程序 里 获取 关于 事件 的 信息 ， 就 需要 使 用 事件 对 
象 。 在 JavaScript 里 ， 因 为 不 同 浏览 器 对 事件 对 象 的 获取 以 及 事件 对 象 的 属性 有 差异 ， 所 以 开发 
人 员 很 难 使 用 事件 对 象 实现 跨 浏览 器 的 操作 。 不 过 jQuery 库 在 遵循 W3C 标准 的 同时 ， 对 事件 对 
象 又 进行 了 一 次 封装 ， 使 得 事件 对 象 的 使 用 具有 更 好 的 兼容 性 。 

关于 事件 对 象 的 属性 请 见 表 10-14。 


表 10-14 事件 对 象 的 属性 


type 事件 类 型 ， 如 果 使 用 一 个 事件 处 理 广 法 来 处 理 多 个 事件 ， 可 以 使 用 此 属性 获得 事件 类 型 
target | 获取 事件 角 发 者 DOM 对 银 
data | 事件 调用 时 传 入 额外 参数 


relatedTarget | 对 于 鼠标 事件 ， 标 示 触 发 事件 时 离开 或 者 进入 的 DOM 元 素 
cumentTarget | 冒 泡 前 的 当前 触发 事件 的 DOM 对 象 ， 等 同 于 this 
pageX/Y 。 | 鼠标 事件 中 ， 事 件 相对 于 页 面 原点 的 水 平 /垂直 坐标 
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( 续 表 ) 
属性 名 称 描述 
result 上 一 个 事件 处 理 方法 返回 的 值 
timeStamp 事件 发 生 时 的 时 间 戳 
altKey Alt 键 是 否 被 按 下 ， 如 果 按 下 则 返回 tme 
ctrIKey Ctrl 键 是 否 被 按 下 ， 如 果 按 下 则 返回 true 
metaKey Meta 键 是 否 被 按 下 ， 如 果 按 下 则 返回 tue。Meta 键 就 是 PC 机 器 的 Ctrl 键 ， 或 者 Mac 机 器 
的 Command 键 
shiftKey Shif 键 是 否 被 按 下 ， 如 果 按 下 则 返回 true 
keyCode 对 于 keyup 和 keydown 事件 返回 被 按 下 的 键 ， 不 区 分 大 小 写 ,例如 a 和 A 都 返回 65。 对 于 
keypress 事件 请 使 用 which 属性 ， 因 为 which 属性 跨 浏 览 时 依然 可 靠 
which 对 于 键盘 事件 ， 返 回 触 发 事件 的 键 的 数字 编码 。 对 于 鼠标 事件 ， 返 回 鼠 标 按 键 号 (1 左 键 ， 
2 中 键 ，3 右键 ) 
screenX/Y 对 于 鼠标 事件 ， 获 取 事 件 相对 于 屏幕 原点 的 水 平 /垂直 坐标 
关于 事件 对 象 的 方法 如 表 10-15 所 示 。 
表 10-15 事件 对 象 所 拥有 的 方法 
方法 名 称 说 明 
preventDefault| 取消 可 能 引起 任何 语意 操作 的 事件 ， 比 如 <a> 标 签 元 素 的 href 链接 加 载 ， 


表单 提交 以 及 click 引起 复 选 框 的 状态 切换 
是 否 调用 过 preventDefault() 方 法 

取消 事件 冒 泡 

是 否 调用 过 stopPropagation( 方 法 


取消 执行 其 他 的 事件 处 理 方法 并 取消 事件 冒 泡 。 如 果 同 一 个 事件 绑 定 了 多 
个 事件 处 理 方法 ， 在 其 中 一 个 事件 处 理 方法 中 调用 此 方法 后 将 不 会 继续 调 
用 其 他 的 事件 处 理 方法 


是 否 调用 过 stopImmediatePropagation() 方 法 


isDefaultPrevented0) 
stopPropagation() 
isPropagationStopped() 
stopImmediatePropagation() 


isImmediatePropagationStopped() 


10.4.3 ”页 面 初始 化 事件 


基本 上 本 章 的 大 多 数 示 例 都 使 用 了 页 面 加 载 事 件 来 演示 jQuery 的 功能 ， 也 就 是 
$(document).ready 这 个 事件 。 页 面 加 载 事 件 是 jQuery 提供 的 事件 处 理 模 块 中 最 重要 的 一 个 函 
数 ， 可 以 极 大 地 提高 Web 应 用 程序 的 响应 速度 。 简 而 言 之 ， 该 方法 就 是 对 window.load 事件 的 蔡 
代 ， 通 过 使 用 该 方法 ， 可 以 在 DOM 载 入 就 绪 且 能 够 读 取 并 操纵 时 ， 就 可 以 调用 在 ready 事件 中 
定义 的 函数 代码 ， 页 加 载 事 件 的 语法 如 下 所 示 : 
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为 了 能 正确 使 用 ready 事件 ， 必 须 确保 <body> 标 签 中 没有 定义 onload 事件 ， 否 则 不 会 触发 | 
Teady 事件 ， 而 且 onload 事件 必须 要 等 到 所 有 元 素 下 载 完成 后 才 会 执行 ， 这 会 影响 到 执行 的 | 


效率 。 


还 可 以 使 用 比较 简洁 的 语法 : 
OOE 有 0 
还 可 以 直接 书写 为 ， 


其 中 function 表示 在 页 面 加 载 时 要 执行 的 函数 ， 在 一 个 页 面 内 可 以 同时 定义 多 个 read0 事 件 
处 理 代 码 ， 它 们 会 在 页 面 加 载 时 依照 定义 的 先后 次 序 统一 得 到 执行 ， 就 好 像 是 在 一 个 函数 体内 执 
行 了 多 段 代码 一 样 。 

为 了 理解 页 面 初 始 化 事件 的 编写 方式 和 执行 方式 ， 下 面 新 建 一 个 页 面 (参见 源 代 码 
chapter10\document_ready.html)， 在 页 面 上 编写 如 下 页 面 加 载 事 件 语句 。 


【示例 10-12】 ”加 载 事件 
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这 个 代码 示例 分 别 演示 了 4 种 不 同 的 页 面 加 载 事件 的 写法 ， 用 于 弹出 对 话 框 ， 运 行 时 会 看 
到 ， 所 有 的 页 面 加 载 事 件 都 得 到 了 执行 ， 而 如 果 是 多 次 关联 window.load 事件 ， 则 只 有 最 后 一 个 
会 被 执行 。 


10.4.4” 绑 定 事件 


一 般 会 在 页 面 加 载 事 件 中 为 DOM 中 的 元 素 关联 事件 ，jQuery 封装 了 DOM 元 素 的 事件 处 理 
方法 ， 提 供 了 一 些 绑 定 标准 事件 的 简单 方式 ， 比 如 本 章 多 次 使 用 的 $("#button1").click0 〇 这样 的 绑 
定 方式 ，jQuery 还 提供 了 一 个 名 为 bind 的 方法 ， 专 门 用 于 事件 的 绑 定 ， 其 语法 如 下 所 示 : 


A Slselector).bind(eventdatafunction) 
参数 的 作用 如 下 所 示 : 


@ event 参数 可 以 是 所 有 的 javaScript 事件 对 象 ， 有 如 下 事件 处 理 类 型 : blur, focus, focusin, 
focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, 
mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, 
keyup, error 可 以 作为 event 参数 传 入 。 

@ ”可 选 的 data 参数 作为 event.data 属性 值 传递 给 事件 对 象 的 额外 数据 对 象 。 

@ function 则 是 用 来 绑 定 的 处 理 函 数 ， 一 般 事件 处 理 代 码 就 写 在 这 个 函数 的 函数 体内 。 


加 与 Javascript 的 事件 处 理 类 型 相 比 ，jQuery 的 事件 处 理 类 型 少 了 on 前 级 ， 比 如 在 本 | 


中 的 onclick， 在 jQuery 中 为 click。 


举 个 例子 ， 为 按钮 关联 click 事件 处 理 代码 ， 可 以 使 用 简单 的 事件 关联 语句 : 


也 可 以 使 用 bind 函数 来 编写 事件 处 理 代码 ， 接 下 来 新 建 一 个 网 页 (参见 源 代码 
chapterl0\bind_eventhtml)， 在 该 网 页 内 部 添加 两 个 按钮 ， 并 且 使 用 bind 方法 绑 定 事件 ， 绑 定 事 
件 的 HTML 页 面 如 下 所 示 。 


【示例 10-13】 ”bind 方法 绑 定 事件 
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在 示例 的 HTML 代码 中 ， 放 置 了 两 个 按钮 ， 分 别 是 btnl 和 btn2， 将 用 来 显示 消息 以 及 动画 
显示 或 隐藏 消息 。 而 消息 是 定义 在 div 中 的 一 段 用 pre 元 素 包 时 的 描述 文本 ， 接 下 来 使 用 bind 方 
法 来 为 这 两 个 按钮 添加 事件 处 理 代码 ， 实 现代 码 如 下 所 示 。 
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25 
26 $("#content") .css ("background-color","green") 7 
27 


28 </script> 


示例 中 使 用 bind 语句 分 别 为 bnl 和 btn2 关联 了 事件 处 理 代码 ， 在 第 1 个 bind 事件 中 调用 
div 元 素 content 的 show 方法 ， 让 其 渐渐 显示 ， 第 2 个 按钮 btn2 将 判断 content 是 否 显示 ， 如 果 
显示 则 让 其 隐藏 ， 否 则 让 其 慢 慢 显 示 ， 运 行 效果 如 图 10.39 所 示 。 
2 bind 绑 定 事 件 一 Mozilla Firefoz 
文件 人 ) 编辑 下 ) 查看 WW 历史 人 @) 书签 中 工具 中 帮助 人 D 
记 file: /1/6: /书籍 稿件 /lt @ C | 图 ~ 百度 
Pind 纤 定 事 件 加 | 


EE 
[A 动 盏 | | 


图 10.39 bind 事件 处 理 效果 


bind 方法 还 可 以 同时 关联 多 个 事件 处 理 代码 ， 这 样 可 以 一 次 性 地 为 同一 个 元 素 关联 多 种 不 
同 的 事件 处 理 程序 。 例 如 可 以 对 btnl 按钮 既 绑 定 click 事件 ， 又 绑 定 mouseover 和 mouseout 事 
件 ， 代 码 如 下 所 示 : 
$ ("#btn1") .bind({ 
click:function() {$("#content") .show (3000) ;}, // 绑 
定 按钮 单 击 事件 


mouseover:function(){$("#content") .css("background-color", "red");}, 


// 绑 定 鼠 标 移入 事件 


mouseout: function () {$ ("#content") .css ("background-color"，"#FFFFFF") 7;} 
// 绑 定 鼠 标 移出 事件 
])7 


可 见 bind 的 功能 相 较 之 简单 的 直接 关联 ， 还 是 非常 方便 的 。 


10.4.5“ 移 除 事件 绑 定 


移 除 事件 关联 使 用 与 bind 方法 对 应 的 unbind 方法 ， 该 方法 会 从 指定 的 元 素 上 删除 一 个 或 多 
个 事件 和 处 理 程序 。 其 语法 如 下 所 示 : 


$ (selector) .unbind(event, function) 
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如 果 不 指 定 unbind 的 任何 参数 ， 将 移 除 选 定 元 素 上 的 所 有 的 事件 处 理 程序 ， 参 数 event 指定 
要 删除 的 事件 ， 多 个 事件 之 间 用 空格 分 隔 ，fonction 用 来 指定 取消 绑 定 的 函数 名 。 

下 面 新 建 一 个 名 为 unbind_event.html 的 网 页 ， 将 上 一 小 节 的 示例 bind_eventhtml 的 内 容 拷贝 
到 该 网 页 上 ， 然 后 添加 两 个 新 的 按钮 ， 用 来 移 除 事件 的 绑 定 ， 新 添加 的 按钮 HTML 代码 如 下 : 


接 下 来 在 页 面 加 载 事件 中 添加 如 下 代码 来 移 除 按钮 1 和 按钮 2 的 事件 绑 定 ， 代 码 如 下 
所 示 : 


btn3 的 单 击 事件 处 理 代码 中 ，unbind 指定 了 click 参数 ， 表 示 仅 移 除 click 事件 处 理 器 ， 而 
btn4 的 unbind 没有 指定 任何 参数 ， 则 表示 移 除 btn2 的 所 有 事件 处 理 代 码 。 


10.4.6 ”切换 事件 
当 两 个 以 上 的 事件 绑 定 到 一 个 元 素 上 时 ， 可 以 定义 根据 元 素 的 不 同 的 动作 行为 在 不 同 的 动作 
间 进 行 切换 。 比 如 超级 链接 <a> 标 签 ， 当 鼠标 悬 停 时 可 以 触发 一 个 事件 ， 鼠 标 移出 时 可 以 触发 另 
一 个 事件 。jQuery 中 有 两 个 方法 用 来 定义 事件 的 切换 ， 分 别 是 : 
@ ”hover 方法 : 元 素 在 所 标 是 停 与 筷 标 移出 的 事件 中 进行 切换 ， 这 个 方法 实际 上 是 对 
mouseenter 和 mouseleave 事件 的 合并 ， 用 来 模仿 一 种 所 标 悬 停 的 效果 。 
@ toggle 方法 : 可 以 依次 调用 多 个 指定 的 函数 ， 直 到 最 后 一 个 函数 ， 接 下 来 又 重复 对 这 些 
函数 进行 轮流 调用 。 目 前 在 新 版 本 中 已 经 文 弃 ， 这 里 不 再 详细 讲述 。 


hover 方法 模拟 鼠标 巧 停 效 果 ， 其 声明 语法 如 下 所 示 : 


可 选 的 over 表示 鼠标 经 过 时 要 执行 的 事件 处 理 代 码 ，out 表示 鼠标 移出 时 要 执行 的 事件 处 理 
代码 。 为 了 演示 hover 方法 的 效果 ， 新 建 一 个 网 页 (参见 源 代码 chapter10\hover_event.html)。 
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【示例 10-14】 ”hover 方法 的 效果 


接 下 来 使 用 hover 来 定义 事件 切换 效果 ，hover 方法 的 使 用 方法 如 下 所 示 。 


可 以 看 到 hover 方法 内 部 定义 了 两 个 函数 代码 ， 分 别 表 示 悬 停 和 移出 的 事件 处 理 代码 ， 悬 停 
时 会 快速 显示 id 为 content 的 div 内 容 ， 移 出 时 会 隐藏 div 中 的 内 容 ， 因 此 运行 时 可 以 发 现 ， 
hover 实际 上 就 是 mouseenter 和 mouseleave 事件 的 合并 。 


10.5 4 千 


本 章 是 对 jQuery 框架 的 技术 概览 ， 围 绕 jQuery 框架 的 对 象 、 选 择 器 、DOM 操作 和 事件 进 
行 讲解 ， 每 个 技术 点 都 辅助 以 很 小 的 网 页 案例 ， 相 信 通 过 这 样 的 讲解 方式 ， 读 者 能 一 遍 学 会 
jQuery 的 操作 方法 。jQuery 的 目的 就 是 简化 操作 ， 读 者 也 会 发 现 本 章 很 多 案例 都 只 用 几 行 代码 
就 可 以 搞定 。 


第 11 章 
< jQuery Mobile 和 移动 开发 八 门 > 


jQuery Mobile 是 一 个 用 来 构建 跨 平 台 移动 Web 应 用 的 轻 量 级 开源 UI 框架 ， 具 有 简单 、 高 
效 的 特点 ， 能 够 让 没有 美工 基础 的 开发 者 在 极 短 的 时 间 内 做 出 非常 完美 的 界面 设计 ， 并 且 它 几乎 
支持 市 面 上 所 有 的 常见 移动 平台 。 可 以 说 ，jQuery Mobile 是 移动 开发 者 楚 呆 以 求 的 神器 。 本 章 
将 介绍 在 使 用 jQuery Mobile 进行 开发 时 所 必须 掌握 的 一 些 名 词 ， 如 HTML 5。 

本 章 主要 包括 以 下 内 容 : 

@ ”什么 是 跨 平 台 移 动 开发 框架 

@ 常见 的 跨 平 台 移动 开发 框架 有 哪些 

@ ”什么 是 jQuery Mobile 

@@ ”为 什么 要 选择 jQuery Mobile 


跨 平台 移动 开发 框架 


马克 思 在 资本 论 中 曾经 提 到 过 ， 一 切 社会 形态 都 取决 于 生产 力 。 而 对 一 名 开发 者 来 说 ， 生 活 
水 平 〈 主 要 指 收入 ) 也 主要 由 生产 力 来 决定 。 为 了 提高 生产 力主 要 有 两 条 路 可 以 选择 : 


(1) 努力 学 习 ， 积 累 经 验 使 自己 具有 更 高 的 技术 。 

(2) 选择 更 高 效 的 开发 工具 。 

本 书 主要 介绍 的 是 如 何 利用 更 高 效 的 工具 来 提高 开发 效率 ， 作 为 跨 平 台 开 发 者 ， 你 将 在 本 书 
中 得 到 你 需要 的 技术 。 

如 何 使 用 工具 来 提高 开发 效率 呢 ? 曾经 有 人 设想 有 这 样 一 款 IDE (集成 开发 环境 )， 开 发 者 
可 以 将 自己 的 需求 通过 键盘 输入 IDE 中 ，IDE 就 会 自动 生成 开发 者 所 需要 的 软件 了 。 这 确实 是 
软件 工程 学 科 近 些 年 比较 热门 的 一 项 课题 ， 可 惜 的 是 还 远 远 不 能 实现 需求 。 

因此 就 只 能 退 而 求 其 次 ， 于 是 跨 平 台 移动 开发 框架 就 应 运 而 生 了 。 


11.1.1 什么 是 跨 平台 移动 开发 框架 
近年 来 随 着 硬件 设备 和 平台 的 不 断 发 展 ， 手 持 移动 设备 的 计算 能 力 得 到 了 显著 的 提高 ， 智 能 
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手机 和 平板 电脑 已 经 越 来 越 多 地 出 现在 人 们 的 日 常生 活 中 。 无 论 是 多 么 强大 的 硬件 还 是 多 么 优秀 
的 平台 ， 都 要 有 软件 来 支撑 。 但 是 厂商 之 间 的 竞争 导致 软件 在 不 同 平台 中 不 兼容 的 现象 。 比 如 安 
卓 上 的 apk 文件 就 无 法 在 iOS 中 运行 ， 甚 至 是 早期 一 些 安 卓 上 运行 的 APP 在 当前 的 大 屏 手 机 上 
也 无 法 正常 显示 。 

作为 一 名 开发 者 ， 这 时 就 不 得 不 做 出 取舍 ， 是 选择 自己 精通 的 一 个 平台 做 好 呢 ? 还 是 花费 大 
量 的 时 间 和 精力 同时 进行 多 个 平台 的 开发 ， 甚 至 是 花 钱 雇 人 来 开发 其 他 的 平台 ? 这 看 似 一 个 难以 
抉择 但 是 又 没有 完美 答案 的 选择 题 。 

能 不 能 选择 一 种 完美 的 方案 呢 ? 当然 可 以 ， 因 为 有 跨 平台 移动 开发 框架 。 

所 谓 跨 平台 移动 开发 框架 ， 可 以 简单 地 分 解 成 几 个 词语 :“ 跨 平台 ”“ 移 动人 “开发 框架 ”。 
跨 平 台 指 的 是 只 需要 经 过 一 次 开发 ， 得 到 的 应 用 就 可 以 在 多 个 平台 上 流畅 运行 。 目 前 比较 主流 的 
移动 操作 系统 包括 Android、iOS、Windows Phone (简称 WP)、BlackBerry、MeeGo 等 ， 为 了 实 
现在 这 么 多 系统 之 间 兼 容 ， 跨 平台 开发 框架 往往 采用 HTML 5 为 开发 语言 ， 然 后 利用 Web 执 
行 ， 或 者 有 专门 的 开发 环境 能 够 生成 全 部 平台 适用 的 安装 文件 。 

就 拿 本 书 介绍 的 jQuery Mobile 为 例 ， 它 是 一 款 基 于 HTML 5 的 跨 平 台 开发 框架 ， 可 以 利用 
它 来 生成 非常 华丽 的 网 页 文件 ， 同 时 也 可 以 借助 另 一 款 框 架 PhoneGap 的 帮助 来 分 别 生成 apk 

( 安 卓 中 的 安装 文件 )、ipa (iOS 中 的 安装 文件 ) 或 xap (WP 中 的 安装 文件 ) 等 格式 的 文件 。 如 
图 11.1 所 示 为 一 款 跨 平 台 开发 框架 主页 上 为 了 说 明 它 的 跨 平台 特性 而 设计 的 图 片 。 


I1Y2 / ATIQTOIN / VIN FNIONGC 


一 次 编写 ， 多 平台 运行 

TS 全 面 图 

ID ' 志 ' 四 Q 加 加 OO MeeGo 
图 11.1 跨 平台 移动 开发 框架 的 特性 


所 谓 移动 自然 指 的 是 主要 支持 移动 设备 ， 也 就 是 说 这 些 框架 是 专 为 移动 设备 〈 如 手机 或 平 
板 ) 而 定制 的 。 这 也 说 明 该 框架 不 会 考虑 一 些 比 较 老 的 PC 浏览 器 (如 IE 6) 的 兼容 性 ， 但 是 大 
多 数 情况 下 在 PC 上 仍然 是 可 以 正常 使 用 的 。 

最 后 还 剩 下 “开发 框架 ”4 个 字 。 跨 平台 开发 框架 令 开发 者 感到 欣慰 的 地 方 ， 在 于 它 “ 开 发 
框架 ”的 特性 ， 该 特性 使 得 它 能 够 大 大 提高 开发 人 员 的 效率 。 所 谓 开发 框架 ， 指 的 就 是 一 组 已 经 
被 定义 好 的 设计 构件 。 如 在 HTML 5 中 定义 一 个 按钮 非常 容易 ， 但 是 要 为 它 加 入 一 些 好 看 的 样 
式 可 能 光 CSS 就 要 写 几 十 行 ， 但 是 有 了 jQuery Mobile 后 ， 只 需要 一 行 就 可 以 了 。 


11.1.2 ”为 什么 选择 跨 平 台 移动 开发 框架 


这 个 问题 实在 是 没有 必要 再 重申 了 ， 因 为 之 前 的 所 有 内 容 都 是 在 不 断 地 铺垫 ， 以 使 读者 能 够 
自己 幅 然 醒悟 :“ 哇 ! 原来 跨 平 台 移动 开发 框架 这 么 好 啊 !1” 
跨 平台 移动 开发 框架 的 优点 如 下 : 
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(1) 一 次 编写 ， 多 平台 运行 ， 自 动 适 配 各 种 屏幕 尺寸 。 
(2) 上 手 迅速 ， 开 发 效率 高 。 

(3) 避 过 麻烦 的 重重 审批 ， 直 接 面 向 用 户 。 

(4) 没有 美工 基础 的 开发 人 员 也 可 以 设计 出 优秀 的 界面 。 


下 面 将 分 别 就 这 4 点 来 举例 描述 。 

一 次 编写 多 平台 运行 。 目 前 绝 大 多 数 智能 手机 都 支持 HTML 5， 况 且 还 可 以 将 内 容 打 包 成 相 
应 平台 的 应 用 ， 这 更 保证 了 应 用 的 可 运行 性 。 

上 手 迅 速 ， 开 发 效率 高 。 笔 者 身边 许多 同事 是 没有 HTML、JavaScript 开发 经 验 的 ， 甚 至 许 
多 干脆 就 是 销售 人 员 ， 但 是 经 过 一 两 天 的 学 习 后 ， 也 能 够 做 出 一 些 非常 不 错 的 应 用 界面 。 

避 过 重重 审批 ， 直 接 面 向 用 户 。 上 传 到 应 用 市 场 能 不 能 通过 审批 都 是 未 知 数 〈 比 如 说 App 
Store 中 的 快 播 )， 为 了 能 够 面向 用 户 《 最 根本 的 还 是 获得 广告 收入 )， 最 好 的 办 法 就 是 直接 生成 
网 页 ， 只 要 有 一 台 服 务 器 就 够 了 ， 甚 至 连 域名 也 不 需要 。 


| 其 实 这 样 也 有 一 个 缺点 ， 就 是 没有 了 相应 平台 的 推广 。 也 就 是 说 ， 需 要 开发 者 自己 去 推广 自 
| 已 的 应 用 。 然 而 反 过 来 想 ， 什 么 时 候 听 说 过 “ 某 某 OD” 因 为 推广 而 发 愁 过 。 需 要 绕 过 审核 
的 应 用 本 身 就 对 用 户 有 着 莫大 的 吸引 力 ， 让 用 户 能 够 有 兴趣 主动 去 寻找 它们 。 


即使 是 没有 美工 基础 的 开发 人 员 也 可 以 设计 出 优秀 的 界面 ， 因 为 在 这 些 开 发 框架 中 大 多 已 经 
定义 好 了 要 使 用 的 样式 ， 开 发 者 只 要 根据 自己 的 需要 对 各 种 样式 进行 选择 就 可 以 了 。 其 实 不 光 是 
这 些 “高 级 ”的 集成 开发 环境 ， 就 算是 原生 的 SDK 中 也 集成 了 一 些 基础 样式 ， 只 不 过 它们 大 多 
比较 丑 ， 需 要 开发 者 去 进一步 美化 映 了 。 


11.1.3 ”常见 的 跨 平台 移动 开发 框架 有 哪些 

常见 的 跨 平台 移动 开发 框架 有 : jQuery Mobile、Sencha Touch、Doju Mobile、AppCan、 
PhoneGap、Cocos2d-X 等 。 当 然 类 似 的 框架 还 有 很 多 ， 这 里 只 列 出 这 些 比较 有 代表 性 的 。 下 面 将 
对 它们 进行 一 一 介绍 。 

1 .jQuery Mobile 

jQuery Mobile 是 jQuery 在 手机 和 平板 上 的 版 本 ， 它 不 仅 带 来 能 够 让 主流 移动 平台 支持 的 
jQuery 核心 库 ， 还 包括 了 一 整套 完整 和 统一 的 移动 UI 框架 。jQuery Mobile 不 仅 支持 全 球 各 个 主 
流 移动 平台 ，PC 平台 的 Web 应 用 中 也 常常 看 到 它 的 身影 。jQuery Mobile 的 开发 团队 认为 ， 
jQuery Mobile 在 向 各 种 主流 浏览 器 提供 一 种 统一 的 用 户 体验 (如 图 11.2 所 示 为 jQuery Mobile)。 


361 


构建 移动 网 站 与 APP: HTML 5+CSS 3+jQuery Mobile 入 门 与 实战 


图 11.2 jQuery Mobile 
2 . Sencha Touch 


Sencha Touch 是 一 款 将 现 有 的 ExtJS 框架 整合 JQTouch、Rapha 库 而 推出 的 ， 适 用 于 最 前 沿 
Touch Web 的 移动 开发 框架 。Sencha Touch 可 以 让 Web App 看 起 来 更 像 Native App， 其 美丽 的 用 
户 界 面 组 件 和 丰富 的 数据 管理 ， 全 部 基于 最 新 的 HTML 5 和 CSS3 的 Web 标准 ， 且 全 面 兼 容 
Android 和 iOS 设备 。 

Sencha Touch 所 自 带 的 主题 样式 可 以 说 是 所 有 开发 框架 中 最 接近 iOS 原生 样式 的 ， 甚 至 能 以 
假 乱 真 。 另 外 ， 它 还 给 Android 开发 人 员 准 备 了 若干 套 适 用 于 Android 的 主题 。 

Sencha Touch 与 其 他 移动 开发 框架 相 比 ， 最 大 的 优点 还 在 于 其 提供 了 增强 的 触摸 事件 处 理 机 
制 ， 在 touchstart、touchend 等 标准 事件 的 基础 上 ， 增 加 了 一 组 自 定义 事件 数据 集成 ， 如 tap、 
swipe、pinch、rotate 等 。 这 些 事件 使 得 Sencha Touch 能 够 更 好 地 处 理 页 面 中 的 手势 判断 等 操 
作 ， 为 用 户 带 来 更 强大 的 交互 式 体验 (如 图 11.3 所 示 为 Sencha Touch)。 


图 11.3 Sencha Touch 


3 .jQ Touch 


看 到 这 个 名 称 ， 可 能 很 多 读者 会 以 为 这 是 一 款 与 Sencha Touch 一 样 ， 通 过 增加 对 手势 的 处 
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理 来 增强 交互 性 的 框架 。 它 名 字 中 虽然 带 有 一 个 “Touch”， 但 是 jQ Touch 的 特色 在 于 通过 增强 
浏览 器 中 的 动画 、 渐 变 以 及 导航 列表 等 效果 来 达到 目的 。 随 着 iPhone、iPod Touch 等 设备 的 使 用 
日 益 增多 ，jQ Touch 无 疑 为 手机 网 站 的 开发 减少 了 工作 量 ， 而 且 在 样式 和 兼容 性 方面 也 得 到 了 很 
大 的 提高 。 

准确 地 说 ，jQ Touch 并 不 能 完全 算 作 一 款 移动 开发 框架 ， 因 为 它 原本 只 是 来 自 于 Sencha 
Libs 的 一 款 jQuery 插件 ， 用 于 在 iPhone 等 触 屏 设 备 上 实现 一 些 简 单 的 动画 效果 。 笔 者 认为 将 它 
作为 一 个 包含 了 比较 全 面 的 UI 效果 的 JavaScript 库 来 使 用 会 更 合适 一 些 (如 图 11.4 所 示 为 jQ 
Touch )。 
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图 11.4 jQ Touch 


随 着 触 屏 移动 设备 的 增多 ，jQ Touch 团队 在 这 上 面 确实 下 了 不 少 苦 功 ， 以 至 于 它 现在 越 来 越 
“ 像 ” 一 球 开发 框架 了 。 目 前 jQ Touch 已 经 能 够 提供 很 好 的 文档 管理 ， 并 且 容 易 使 用 。 但 是 仍 
然 存在 为 数 不 少 的 bug， 包 括 官方 提供 的 一 些小 demo 也 存在 一 些 问题 。 

另外 ， 这 款 框架 是 基于 WebKit 内 核 的 ， 也 就 是 说 它 并 不 是 一 款 完 全 的 跨 平台 开发 框架 ， 至 
少 它 不 能 支持 Gecko (FireFox 和 Opera 浏览 器 的 内 核 )。 


4 . Doju Mobile 


Doju Mobile 是 Dojo 工具 包 的 一 个 扩展 ， 提 供 了 一 系列 小 部 件 或 组 件 ， 来 帮助 开发 者 快 
速生 成 希望 获得 的 界面 效果 。 与 Sencha Touch 类 似 的 是 ，Doju Mobile 也 致力 于 通过 HTML 
5 来 模拟 出 原生 应 用 的 界面 效果 ， 对 于 一 些 不 熟悉 开发 的 用 户 来 说 ， 根 本 看 不 出 这 类 应 用 与 
原生 应 用 的 差别 。 

另外 ，Doju Mobile 还 拥有 可 定制 的 主题 ， 如 同样 的 页 面 在 iOS 用 户 和 Android 用 户 访问 
时 ， 看 到 的 界面 也 许 会 完全 不 同 〈 如 图 11.5 所 示 为 Doju Mobile )。 
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图 11.5 Doju Mobile 


Doju Mobile 与 jQ Touch 都 是 基于 WebKit 内 核 的 开发 框架 ， 但 这 却 并 不 代表 它 不 能 支持 其 
他 内 核 的 浏览 器 。 经 过 笔者 的 测试 ， 它 在 Firefox 和 Chrome 中 都 有 着 不 俗 的 表现 。 

除了 这 些 之 外 ，Doju Mobile 有 一 个 独 有 的 特点 是 非常 值得 其 他 几 款 框架 的 开发 者 学 习 的 ， 
那 就 是 Doju Mobile 本 身 在 UI 样式 中 不 使 用 图 片 来 加 快 浏览 的 速度 ， 但 是 当 应 用 中 不 可 避免 地 
需要 图 片 资源 时 ，Doju Mobile 提供 了 一 些 有 用 的 机 制 (如 DOM button 和 CSS sprite) 来 降低 图 
像 需求 ， 并 减少 服务 器 的 HTTP 请 求 数量 。 

5 . AppCan 

AppCan 是 国内 开发 的 移动 开发 框架 ， 同 时 也 是 国内 Hybrid App 混合 模式 开发 的 倡导 者 。 
AppCan 应 用 引擎 支持 Hybrid App 的 开发 和 运行 ， 并 且 着 重 解 决 了 基于 HTML 5 的 移动 应 用 “不 
流畅 ”和 “体验 差 ”的 问题 。 使 用 AppCan 应 用 引擎 提供 的 Native 交互 能 力 ， 可 以 让 HTML 5 
开发 的 移动 应 用 基本 接近 Native App 的 体验 (如 图 11.6 所 示 为 AppCan )。 


本 AcPCon 
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图 11.6 AppCan 


与 Phonegap 支持 单一 WebView 且 使 用 div 为 单位 开发 移动 应 用 不 同 ，AppCan 支持 多 窗口 
机 制 ， 让 开发 者 可 以 像 开 发 最 传统 的 网 页 一 样 ， 通 过 页 面 链接 的 方式 灵活 地 开发 移动 应 用 。 基 于 
这 种 机 制 ， 开 发 者 可 以 开发 出 大 型 的 移动 应 用 ， 而 不 是 只 开发 简易 类 型 的 移动 应 用 。 
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与 其 他 开发 框架 不 同 的 是 ，AppCan 提供 了 专门 的 IDE 集成 环境 ， 并 能 够 调用 移动 设备 的 各 
个 组 件 〈 如 摄像 头 、 话 简 等 )， 开 发 者 可 以 通过 JS 接口 调用 ， 轻 松 构建 移动 应 用 。 

它 的 优点 除了 能 够 生成 安装 文件 和 调用 系统 功能 之 外 ， 更 多 的 还 是 集中 在 一 个 “ 快 ” 字 上 。 
确实 ，AppCan 生成 的 应 用 运行 起 来 确实 要 流畅 得 多 ， 但 是 由 于 开发 门槛 较 低 再 加 上 是 国内 研发 


的 原因 ， 使 用 AppCan 的 开发 者 总 会 受到 或 多 或 少 的 歧视 ， 但 是 最 近 这 一 现象 已 经 大 有 改观 。 
6 . PhoneGap 


PhoneGap 是 一 款 基于 HTML、CSS 和 JavaScript 的 创建 移动 跨 平台 移动 应 用 程序 的 快速 开 
发 平台 ， 它 使 开发 者 能 够 利用 iPhone、Android、Palm、Symbian、WP、Bada 和 Blackberry 等 智 
能 手机 的 核心 功能 包括 地 理 定 位 、 加 速 器 、 联 系 人 、 声 音 和 振动 等 。 此 外 PhoneGap 还 拥有 
丰富 的 插件 ， 可 以 以 此 扩展 无 限 的 功能 (如 图 11.7 所 示 为 PhoneGap 架构 图 )。 

与 前 面 介 绍 的 几 款 框架 不 同 ，PhoneGap 并 不 带 有 任何 UI 样式 ， 并 且 也 无 法 独立 使 用 ， 但 是 它 
可 以 依靠 各 个 平台 的 IDE (如 Android 的 Eclipse) 将 HTML 文件 生成 相应 的 安装 文件 ， 同 时 可 以 使 
HTML 能 够 调用 系统 功能 ， 如 发 短信 、GPS、 手 电 简 等 。 整 个 流程 的 效果 如 图 11.8 所 示 。 


图 11.7 PhoneGap 架构 图 图 11.8 PhoneGap 将 HTML 文件 生成 应 用 


7 . Cocos2d-X 
Cocos2d-X 是 一 款 比 较 独 特 的 开发 框架 ， 笔 者 截取 了 Cocos2d-X 官网 上 的 一 些 案例 截图 ， 如 


图 11.9 所 示 。 


FishingJoy2 Waringst. Bateland. DargonFore Womholes DreamPark. CragRope 
国 国 区 图 因 电 思 
MyFishbowl 。 slespyBunny DoomscayPig SuperDma Zuatch delecve@ Lepsword 
图 11.9 使 用 Cocos2d-X 开发 的 应 用 
读者 是 否 有 发 现 这 些 图 标 非常 熟悉 ， 全 部 是 游戏 ? Cocos2d-X 其 实 是 一 款 强大 的 跨 平台 移动 
游戏 开发 框架 ， 而 这 么 多 的 “Top10 Gams” 竞 然 都 出 自 于 同一 款 开发 框架 ， 所 以 它 的 强大 自然 
是 毋庸 置疑 的 。 
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认识 jQuery Mobile 


经 过 之 前 的 学 习 ， 相 信 读 者 已 经 了 解 到 什么 是 跨 平台 移动 开发 框架 ， 以 及 为 什么 要 使 用 跨 平 
台 移 动 开 发 框架 ， 接 下 来 就 应 该 选择 一 款 框架 来 进行 学 习 了 。 

目前 市 面 上 有 大 量 的 移动 开发 框架 ， 最 重要 的 是 它们 还 都 是 免费 且 开 源 的 ， 而 且 这 些 框架 都 
是 各 具 特 色 ， 很 难说 出 哪 一 款 会 比较 好 一 些 。 因 此 ， 想 要 选择 一 款 适合 自己 的 开发 框架 是 有 一 定 
难度 的 。 最 终 笔 者 选择 使 用 jQuery Mobile。 


11.2.1 为 什么 选择 jQuery Mobile 


笔者 刚 开 始 了 解 到 的 是 jQuery Mobile、Sencha Touch 和 PhoneGap 这 3 个 框架 。PhoneGap 
不 必 多 说 ， 不 管 是 jQuery Mobile 还 是 Sencha Touch， 最 终 都 要 靠 它 来 打包 成 apk 文件 。 但 是 当 
初 之 所 以 选择 jQuery Mobile 而 不 是 Sencha Touch， 主 要 是 因为 关于 jQuery Mobile 的 资料 要 比 
Sencha Touch 多 一 些 ， 也 因为 jQuery Mobile 确实 比 Sencha Touch 更 容易 上 手 。 
jQuery Moble 华丽 的 UI 控件 以 及 强大 的 跨 平台 能 力 让 人 一 直 对 它 非常 放心 ， 如 图 11.10 所 
示 为 是 它 目前 所 能 支持 的 平台 。 
站 ;05 昌 oo。 ‘ewcksery Owws 
symbian MeeGo 
图 11.10 jQuery Mobile 所 支持 的 平台 
除了 跨 平台 的 特性 之 外 ，jQuery Mobile 还 有 严谨 的 开发 过 程 。 在 jQuery Mobile 官网 上 有 着 
jQuery Mobile 每 一 个 控件 每 一 项 属性 的 使 用 方法 ， 可 以 毫 不 夸张 地 说 ， 它 是 当前 所 有 跨 平台 开 
发 框架 中 文档 最 详细 的 一 个 ， 如 图 11.11 所 示 。 


ositioned as fixed so they remain at the top of the screen at all times instead of 


图 11.11 jQuery Mobile 的 文档 示例 
每 一 个 属性 的 用 法 都 给 出 了 简单 但 是 非常 详细 的 demo， 还 可 以 直接 查看 运行 后 的 效果 ， 这 
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就 为 开发 者 的 学 习 铺 平 了 道路 。 

随 着 后 来 对 jQuery Mobile 理解 的 逐渐 深入 ， 笔 者 又 发 现 了 它 更 多 的 优点 。jQuery Mobile 的 
优点 主要 包括 : 渐进 式 增强 的 主题 界面 、 简 单 但 是 有 条 理 的 标记 化 语言 规范 、 自 适应 布局 三 点 ， 
下 面 会 分 别 介绍 。 


11.2.2 ”渐进 式 增强 的 主题 界面 


前 面 提 到 过 ， 跨 平台 框架 其 实 并 不 能 支持 全 部 的 平台 ， 比 如 说 正 6。 笔 者 在 阅读 jQuery 
Mobile 的 支持 手册 时 发 现 了 一 个 有 意思 的 问题 ，jQuery Mobile 对 浏览 器 的 支持 竞 然 分 为 不 同 的 
级 别 ， 如 图 11.12 所 示 。 它 使 用 了 A、B、C 3 种 不 同 的 标记 来 定义 这 3 种 不 同 的 级 别 ， 用 以 区 
分 浏览 器 对 于 jQuery Mobile 的 支持 程度 。 其 中 “A” 级 别 的 浏览 器 对 jQuery Mobile 的 支持 度 最 
低 ， 而 C 级 别 的 浏览 器 中 jQuery Mobile 所 显示 的 样式 与 WAP 页 面 没有 什么 不 同 。 


MOBILE GRADED BROWSER SUPPORT 
Platform Version Native OperaMobile Opera Mini Fennec Ozone Netfront Phonegap 
85 865 95 100 40 50 10 11 09 40 09 
-加 
“区 
i oq men 
~" BE 
Ao. 四 
Symbian UIQ a 加 
Symbian platorm 30 
时 可 
.a 时 A 
- 四 
Androld 2 A A 
二 革 回 四 加 A 
-ESBSEBS 
Windows Mobile veS1 A 
webos 1 
bada 1 
Maemo - El 目 [cl 
MeeGo 1 四 四 四 


图 11.12 主流 手机 浏览 器 对 jQuery Mobile 的 支持 情况 
jQuery Mobile 官方 给 出 了 对 这 3 种 级 别 的 定义 : 


A: a browser that’s capable of, at minimum, utilizing media queries (a 
requirement for jQuery Mobile). These browsers will be actively tested against 
but may not receive the full capabilities of jQuery Mobile. 


这 类 浏览 器 比较 强大 ， 大 多 数 具 备 对 视频 /音频 的 支持 ， 因 此 jQuery Mobile 的 开发 团队 也 会 
主要 针对 这 类 浏览 器 进行 测试 ， 因 此 jQuery Mobile 在 这 类 浏览 器 中 的 运行 效果 是 非常 好 的 。 
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这 类 浏览 器 也 非常 不 错 ， 但 是 由 于 没有 很 大 的 用 户 群 体 ， 因 此 jQuery Mobile 的 开发 团队 也 
不 会 过 多 地 测试 这 类 浏览 器 上 的 使 用 效果 ， 因 此 仍然 会 有 bug 出 现 。 


这 类 浏览 器 连 许多 基本 的 CSS 样式 都 无 法 支持 ， 因 此 jQuery Mobile 也 无 法 保证 jQuery 
Mobile 在 这 类 浏览 器 上 的 运行 效果 。 

有 一 点 是 肯定 的 ， 即 使 是 C 级 的 浏览 器 ， 当 它 运行 jQuery Mobile 时 依然 能 够 保证 使 用 大 多 
数 的 功能 ， 如 本 该 是 文本 框 的 地 方 仍 然 是 文本 框 ， 只 是 少 了 一 些 样式 而 已 。 


11.2.3 ”简单 但 是 有 调理 的 标记 化 语言 开发 


jQuery Mobile 沿用 了 绝 大 多 数 的 HTML 5 命名 规范 ， 除 了 少数 新 引入 的 数据 类 型 外 ， 其 他 
的 内 容 对 于 HTML 5 开发 者 来 说 都 是 非常 熟悉 的 ， 如 图 11.13 所 示 为 一 个 基本 的 jQuery Mobile 
框架 代码 。 


习 可 oocrrez cm 
2 <hcml> 

-es 

4 <meta http-equive"Cont Contente"text/html; charset=utf-8" /> 
s m idth-device -width, initial-scale-1"> 
€ "1 ‘mobile.min.css" /> 

7 rc="jquery-1.7.1.min.js"></script> 

8 rc="jquery.mobile.min.js"></script> 

9 

10 

11 

32 <div data-role="footer"> 

13 <: 一 头 部 栏 的 内 容 --> 

24 </div> 

15 div dara-role=ncontentr> 

16 <!-- 页 面 的 正文 

17 </div> 

28 日 <div data-role="header"> 

19 <: 一 是 部 栏 的 内 容 --> 

20 [ </div> 

2 </div> 

22 se 


11.13 jQuery Mobile 基本 的 页 面 框架 
现在 可 以 暂时 先 不 去 管 它们 的 具体 意思 ， 从 图 中 可 以 得 到 至 少 两 点 信息 : 


(1) 它 真 的 非常 像 普通 的 HTML 页 面 。 
(2) 代码 的 缩 进 非常 每 服 。 


首先 第 一 条 是 毋庸 置疑 的 ， 毕 竟 它 就 是 基于 HTML 5 的 开发 框架 ， 不 过 可 以 看 到 在 代码 中 
仅 使 用 div 标签 而 没有 引入 新 的 标签 ， 仅 仅 是 通过 data-role 属性 来 区 分 各 个 部 分 ， 并 且 data- 
role 的 命名 方式 也 是 完全 符合 HTML 5 的 命名 规范 的 。 


368 


第 11 章 jQuery Mobile 移动 开发 入 门 


其 次 是 代码 的 缩 进 ， 可 以 看 到 页 面 被 分 成 3 个 部 分 ， 各 个 部 分 之 间 的 层次 感 非常 强 。 相 信 
发 过 HTML 页 面 的 读者 们 都 有 被 div 的 层次 搞 得 景 头 转向 的 经 历 ， 但 是 在 jQuery Mobile 中 ， 只 
要 把 握 好 页 面 的 结构 ， 这 样 的 事情 就 绝对 不 会 发 生 。 


11.2.4 自 适应 布局 


在 HTML 中 ， 对 于 不 同 尺寸 分 辨 率 屏 幕 的 匹配 一 直 是 开发 人 员 非 常 头疼 的 一 个 问题 ， 不 过 
在 jQuery Mobile 中 却 不 需要 青 为 这 样 的 事情 发 愁 。 因 为 jQuery Mobile 能 够 根据 屏幕 的 尺寸 自动 
匹配 最 合适 的 样式 。 如 图 11.14 和 图 11.15 所 示 为 本 书后 面 会 介绍 的 一 个 例子 ， 笔 者 分 别 在 较 小 
的 窗口 和 全 屏 的 浏览 器 中 运行 它 ， 对 比 同 一 个 页 面 在 不 同 屏幕 中 的 效果 。 
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图 11.14 jQuery Mobile 运行 在 全 屏 的 浏览 器 中 〈1366*768 像素 ) 


ED 今日 新 闻 bE 


EER [4 


1 jQuery Wobile 实 战 发 布 eps 
very Mocs 相关 作 和 开放， 电 汪 人 


JQuery Moblle 志 战 发 布 。 “29M 
uk ouny 


jery Mobile 志 训 ) 基 作 全 芝 兴 二 秋 .区 汪 位 坟 


3 有 2 


于 
站 


| jQuery Mobile 实战 发 布 ey 
二 Query Noble 二 基 几 和 二 入 .车 


EE Eb 


图 11.15 jQuery Mobile 运行 在 手机 屏幕 上 
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通过 对 比 可 以 发 现 ， 虽 然 屏幕 的 长 宽 比 例 发 生 了 变化 ， 但 是 却 并 没有 影响 整个 界面 的 协调 
性 。jQuery Mobile 通过 将 页 面 中 的 全 部 元 素 拉 伸 到 占据 页 面 宽度 的 全 部 ， 使 得 每 一 行 中 仅 有 一 
个 元 素来 保证 不 会 发 生 位 置 上 的 变形 。 同 时 也 固定 某 些 控件 的 相对 位 置 ， 比 如 列表 每 一 项 右 侧 的 
箭头 永远 在 列表 项 的 最 右 侧 。 另 外 在 图 11.15 中 ， 列 表 项 中 实际 上 有 一 部 分 内 容 是 超出 了 屏幕 范 
围 的 ，jQuery Mobile 会 自动 将 这 部 分 文字 隐藏 起 来 ， 来 保证 页 面 整体 的 美观 和 协调 。 


Eb 王 由 为 如 此 ,jQuery Mobile 的 应 用 也 并 不 局 限于 手机 应 用 ， 许 多 PC 端的 Web 页 面 也 是 


通过 jQuery Mobile 来 实现 的 。 


11.2.5 ”jQueryMobile 案例 


介绍 完 jQuery Mobile 的 优点 之 后 ， 接 下 来 就 通过 几 个 例子 来 进一步 证 明 jQuery Mobile 确实 
是 一 套 值 得 依赖 的 跨 平台 移动 开发 框架 。 

首先 来 看 看 jQuery Mobile 开发 团队 自己 做 出 来 的 东西 ， 如 图 11.16 和 图 11.17 所 示 。 该 应 
用 是 jQuery Mobile 开发 团队 所 设计 的 一 款 jQuery Mobile 的 说 明文 档 ， 很 明显 是 使 用 jQuery 
Mobile 进行 开发 的 ， 其 界面 非常 简洁 和 漂亮 ， 本 书 最 后 一 章 就 仿照 这 种 样式 开发 了 一 款 简单 的 
视频 播放 器 。 


me Oe rare Ee re 


图 11.16 jQuery Mobile 说 明文 档 的 主 界面 图 11.17 jQuery Mobile 说 明文 档 界面 


除 此 之 外 ， 斯 坦 福 大 学 也 用 jQuery Mobile 开发 了 适合 手机 访问 的 校园 新 闻 网 站 ， 网 址 
如 下 


整体 界面 非常 简洁 大 气 ， 如 图 11.18 所 示 。 
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图 11.18 斯 坦 福 大 学 的 手机 网 站 


WordPress 是 Web 开发 者 都 非常 熟悉 的 一 款 开源 个 人 博客 ， 已 经 有 开发 者 为 WordPress 开发 
了 基于 jQuery Mobile 的 手机 版 主题 ， 如 图 11.19、 图 11.20 和 图 11.21 所 示 。 
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图 11.19 基于 jQuery Mobile 的 WordPress 主题 1 
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图 11.20 基于 jQuery Mobile 的 WordPress 主题 2 11.21 基于 jQuery Mobile 的 WordPress 主题 3 


如 图 11.22 所 示 为 另 一 个 基于 jQuery Mobile 的 WordPress 主题 版 本 ， 只 不 过 它 应 该 是 为 平板 
电脑 而 设计 的 。 
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Db 
图 11.22 基于 jQuery Mobile 的 WordPress 主题 
当然 ， 它 也 有 针对 手机 设计 的 版 本 ， 如 图 11.23 所 示 。 


§ 
¥ 
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图 11.23 又 一 组 基于 jQuery Mobile 的 WordPress 主题 


另外 在 jQuery Mobile 的 官方 网 站 还 提供 了 许多 利用 jQuery Mobile 开发 的 应 用 ， 如 图 
11.24、 图 11.25 和 图 11.26 所 示 。 在 网 址 http://wwwjqmgallery.com/ 可 以 查看 更 多 这 样 的 例子 ， 
事实 上 这 个 网 站 也 是 基于 jQuery Mobile 的 ， 不 得 不 说 这 是 一 件 非常 有 意思 的 事情 。 


LendingTree Sam Adams Brewery ”Zoopla Benjamin Moore 


图 11.24 一 些 基于 jQuery Mobile 开发 的 网 站 
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H&R Block Mowis Tastebuds Marazzi 


图 11.25 一 些 基于 jQuery Mobile 开发 的 网 站 
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图 11.26 一 些 基 于 jQuery Mobile 开发 的 网 站 


从 这 些 例子 中 可 以 看 出 ， 国 外 利用 jQuery Mobile 的 技术 已 经 非常 成 熟 了 ， 而 比较 遗憾 的 
是 ， 目 前 还 没有 找到 国内 有 使 用 jQuery Mobile 比较 成 功 的 例子 。 这 说 明 国内 的 开发 者 在 消化 新 
技术 方面 还 是 比较 迟钝 的 ， 这 也 与 交流 氛围 有 很 大 的 关系 。 


Il.3 下 载 并 应 用 jQuery Mobile 


前 面 把 jQuery Mobile 说 得 这 么 好 ， 国 外 又 把 它 应 用 得 这 么 好 ， 本 节 我 们 就 来 亲自 动手 ， 做 
一 个 自己 的 jQuery Mobile 应 用 。 
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11.3.1 下 载 jQuery Mobile 


jQuery Mobile 下 载 的 网 址 是 : http://jquerymobile.com/download/ 单 击 页 面 中 的 最 新 版 本 ， 开 
始 下 载 jQuery Mobile， 如 图 11.27 所 示 。 如 果 需 要 定制 其 中 的 控件 ， 也 可 以 单 击 “Download 
Builder” 按 钮 进行 定制 。 


图 11.27 下 载 jQuery Mobile 


下 载 下 来 的 jQuery Mobile 是 个 zip 压缩 包 ， 解 压 后 文件 如 图 11.28 所 示 。 这 里 包含 了 jQuery 
Mobile 的 所 有 js 文件 、css 文件 。 


i 1 - 


且 tmos 文件 窒 

下 inaees 文件 夹 

jgery webile external-pne1.4.5. ess 。 层叠 样式 表 文 档 120 到 
jquery nobile external-pne1 .45 层 可 样式 志文 档 GE 
村 jaaery wobile icons-l. 4.5. ess 层 到 样式 表 文 档 127 到 
jquery nobile icons-1.4 5.min css 层 权 样式 志文 档 125 加 
jquery nobile inline-pae1.4.5. ess 。。 层 允 样式 来 文档 148 到 
jgery nobile inlinerpage-1.4.5 sin .， 层 各 样式 来 文档 116 加 
jquery sobile imlintrsvrlL 4 5 css 民生 样式 来 文档 222 四 
jquery sobile inline-sve1.4.5.ain .， 层 台 样式 来 文档 lee 加 
本 jmsr nobile stractare-1.4.5_ css 民生 样式 来 文档 ow 
jquery nobile. structure-1.4.5.nin css 。 层 各 样式 来 文档 后 到 
jquery obile thene-1.4.5.ess 层 各 样式 志文 档 2m 
jquery nobile. thenerl. 4.5. nin ess 层 又 样式 去 文档 12 到 
jquery nobile-l 4.5 ess 层 天 样式 未 文 档 234 四 
村 jsnery wobiler1.4.5.js JSeript Script 455 玛 
jquery sobiler14.5 min ess 层 要 样式 志文 档 203 加 
村 janery mobiler1.4.5 min js JSeript Script 198 玛 
癌 jaaery mebile-1.4.5 sin mep MP 文件 231 到 


11.28 下 载 jQuery Mobile 
如 果 要 使 用 jQuery Mobile， 则 必须 在 HTML 页 面 的 <head> 中 添加 如 下 引用 : 
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| 这 里 要 注意 ， 在 <scrip 亿 标签 中 没有 指定 属性 type="textjavascript"， 是 因为 在 HTMLS 已 经 不 
需要 这 个 属性 。JavaScrip 在 所 有 现代 浏览 器 中 是 HTML5 的 默认 脚本 语言 。 


11.3.2 ”使 用 Dreamweaver 编辑 jQuery Mobile 


jQuery Mobile 能 够 成 功 的 一 个 原因 ， 是 它 能 够 最 大 程度 简化 开发 者 所 遇 到 的 困难 ， 因 此 自 
然 不 能 为 它 配 上 太 复 杂 的 开发 环境 。 对 于 新 手 来 说 ， 还 是 使 用 一 些 比较 简单 的 网 页 开发 工具 会 比 
较 轻 松 一 些 。 

本 文 推荐 使 用 Dreamweaver 的 理由 是 : 


(1) Dreamweaver 拥有 目前 所 有 前 端 编辑 器 中 最 流畅 和 最 全 面 的 代码 提示 功能 ， 因 此 
Dreamweaver 能 够 提供 最 大 程度 的 帮助 。 

(2) 在 Dreamweaver CS 6 中 提供 了 对 jQuery Mobile 以 及 PhoneGap 的 支持 。 

(3) 利用 Adobe TV 功能 可 以 实现 对 jQuery Mobile 应 用 的 实时 预览 ， 由 于 jQuery Mobile 
中 的 样式 是 在 jQuery 执行 后 加 载 到 页 面 中 的 ， 因 此 要 实时 预览 这 样 的 页 面 非常 困难 ， 也 只 有 
Dreamweaver 能 够 实现 这 一 目标 ， 当 然 另 找 一 台 PC 不 断 刷新 浏览 器 也 是 可 以 实现 的 。 


因此 建议 读者 一 定 要 熟练 掌握 这 个 工具 ， 前 面 章节 已 经 介绍 过 Dreamweaver， 所 以 这 里 只 是 
简单 介绍 下 推荐 的 原因 ， 不 再 详细 说 明 如 何 使 用 。 


11.3.3 ”创建 第 一 个 jQuery Mobile 文件 


首先 打开 Dreamweaver， 新 建 一 个 页 面 ( 参 见 源 代码 chapterllyqm_firsthtml)， 添 加 如 下 代码 。 
【示例 11-1】 创建 jQuery Mobile 文件 
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因为 没有 在 页 面 中 加 入 任何 内 容 ， 所 以 页 面 打开 后 将 是 一 片 空白 。 第 7 行 引入 的 css 是 将 来 
使 用 JQuery Mobile 进行 设计 时 所 使 用 的 样式 文件 ， 第 11 行 引入 的 js 文件 是 使 用 脚本 选择 页 面 
中 的 元 素 ， 然 后 将 对 应 的 样式 加 载 到 相应 的 元 素 上 去 。 


11.3.4 在 PC 上 测试 jQuery Mobile 


jQuery Mobile 流行 的 原因 ， 其 中 最 简单 的 一 条 就 是 能 够 像 写 网 页 一 样 开发 应 用 ， 前 面 已 经 
开发 了 一 个 简单 的 jQuery Mobile 应 用 。 这 里 提供 几 种 在 PC 上 测试 应 用 的 方法 。 
1 . 利用 Dreamweaver 的 多 屏 预 览 测试 
在 Dreamweaver 的 工具 栏 中 可 以 看 到 如 图 11.29 所 示 圈 注 的 按钮 ， 通 过 它 可 以 开启 多 屏 预 览 功能 。 
DW 文件 编 昭 (E) 二 看 (V) 插入 (1 修改 (M) ”格式 (O) 命令 (QO 站 点 (S) 


:mn cerrrnt x IIS 


jquery. mobile-1.4.5. css jquery-l.11.2.js 。 jquery.mobile-1.4.5.js 
| 9 [| Wt | RM (RY. W. bo EX B.C i 
图 11.29 Dreamweaver 的 多 屏 预 览 功能 


这 里 使 用 前 面 创建 的 第 一 个 页 面 jqm_first.html 来 进行 测试 ， 因 为 前 面 的 内 容 为 空 ， 这 里 需 
要 在 <body> 中 添加 任意 一 句 话 ， 打 开 多 屏 预 览 功能 ， 效 果 如 图 11.30 所 示 。 


SGIGEFcomm | bi 
电话 320x300) 平板 电 肪 1763 x 300) 
thisis atest thsisatest 


| 


11.30 多 屏 预览 的 效果 
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实际 上 就 是 Dreamweaver 自动 生成 了 3 个 不 同 宽 高 比 的 屏幕 ， 让 它们 同时 在 桌面 上 显示 出 
来 ， 但 是 它们 的 尺寸 还 是 有 点 怪 ! 

11.30 右 侧 有 一 个 按钮 “ 视 口 大 小 ”( 不 同 版 本 翻译 可 能 有 所 不 同 )， 单 击 该 按钮 将 弹出 如 
图 11.31 所 示 的 界面 。Dreamweaver 为 了 保证 三 屏 在 界面 上 排列 的 好 看 ， 才 做 出 了 图 11.31 这 样 
的 设计 ， 是 因为 这 些 宽 高 数据 都 是 不 合理 的 ， 需 要 读者 根据 实际 设备 尺寸 进行 修改 。 而 按照 用 户 
使 用 手机 的 习惯 ， 高 度 应 该 是 大 于 宽度 的 。 


视 口 大 小 法 时 


| 故 2 本 
a | 


桌面 1126 


图 11.31 设置 各 屏幕 的 尺寸 


2 . 利用 jQuery 测试 


由 于 Dreamweaver 的 内 核 不 是 非常 完美 ， 而 且 开发 移动 应 用 自然 要 专注 于 测试 在 Opera、 
Safari 等 浏览 器 下 的 效果 ， 像 正 8 和 下 6 这 样 的 浏览 器 就 可 以 不 去 考虑 了 。 因 此 ， 为 了 有 针对 性 
地 测试 应 用 的 显示 效果 ， 现 在 来 介绍 第 二 种 方法 。 

创建 一 个 页 面 〈 参 见 源 代 码 chapterllNqm_testl.html)， 代 码 如 下 。 


【示例 11-2】 利用 jQuery 测试 


377 


构建 移动 网 站 与 APP: HTML 5+CSS 3+jQuery Mobile 入 门 与 实战 


保存 后 ， 可 以 将 浏览 器 拖 成 一 个 手机 屏幕 的 形状 ， 单 击 屏幕 的 空白 区 域 将 会 弹出 对 话 框 告诉 
开发 者 屏幕 的 分 辨 率 。 如 图 11.32 所 示 为 用 Firefox 查看 浏览 器 窗口 的 分 辨 率 。 

然后 可 以 按 Ctrl+“ 加 号 键 ” 或 “ 减 号 键 ”配合 鼠标 拖 动 窗口 形状 的 方式 ， 使 浏览 器 的 显示 
区 域 恰好 为 所 要 适 配 的 机 型 的 分 辩 率 ， 如 图 11.33 所 示 为 将 屏幕 分 辩 率 调 成 800*400 的 效果 。 
EBT Tl 
magaas ec] (nom 人 国 | 
| er Oe 画 -jaP 


§ fee cj 图 -ap 会 ~ 
园 万 a2 『] 新 于 上 路 国 天 8 天 


中 


| 岗 访问 最 多 「 新 手 上 路 于 起 
| 


四 | 


图 11.32 查看 浏览 器 中 的 分 辨 率 


图 11.33 ”调整 后 的 分 状 率 


必 却 要 调整 得 与 期 望 的 完全 一 样 是 一 件 极其 需要 耐心 的 工作 ， 如 笔者 就 曾 为 了 把 宽度 调 成 400 而 
| 不 是 399 而 花费 了 十 几 分 钟 ， 其 实 完全 没有 必要 太 在 意 这 样 小 小 的 误差 。 儿 个 像素 的 差距 刚 
[ 好 可 以 用 来 保证 更 好 的 屏幕 适应 效果 。 


3 . 利用 Opera Mobile Emulator 来 测试 


当然 ， 利 用 上 面 的 jQuery 来 测试 应 用 还 是 有 一 定 缺 陷 的 ， 那 么 再 来 介绍 一 种 更 好 的 方法 ， 
就 是 利用 Opera Mobile Emulator (Opera 手机 模拟 器 ) 来 测试 应 用 。 它 可 以 让 用 户 在 PC 桌面 以 
手机 的 方式 浏览 网 页 ， 重 现 手机 浏览 器 的 绝 大 多 数 细节 。 由 于 大 多 数 移动 设备 均 采用 了 Opera 的 
内 核 ， 因 此 几乎 与 真 机 没有 任何 差别 。 

下 面 给 出 一 个 下 载 链接 ， 读 者 可 以 百度 搜索 这 款 软 件 的 名 称 ， 也 可 以 根据 链接 下 载 : 


下 载 完 之 后 经 过 简单 的 几 步 就 可 以 运行 了 ， 不 过 运行 之 前 还 需要 在 本 机 架设 一 台 服 务 器 ， 方 
便 对 Web 页 面 进行 浏览 ， 这 里 推荐 一 款 软件 叫 作 XAMPP， 它 可 以 方便 地 在 Windows 中 架设 
WAMP (Windows、Apache、MySQL、PHP) 环境 。 
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安装 完 Opera Mobile Emulator 后 ， 可 以 双击 它 的 图 标 开始 运行 ， 运 行 后 效果 如 图 11.34 所 示 。 
可 以 直接 在 对 话 框 的 左 侧 选 择 以 什么 型 号 的 手机 显示 ， 目 前 数据 还 不 是 非常 完整 ， 但 是 也 足 
够 使 用 了 。 单 击 Launch 按钮 就 可 以 打开 浏览 器 了 ， 这 里 选用 了 HTC Hero， 如 图 11.35 所 示 。 


人 @ Opera Mobile Emulator 加 3 
Bal 闻 E 


Custom 一 | Resolution 。 [etaat 
Samsung Galaxy S | 各 网 页 措 Wap 

Gal 上 EL | 瑞风 页。 弄 Wap 

| Pa Dansity [Deent Zom Oato) 小 说 新 闻 贴吧 知道 地 图 
[ta] [| we 图 片 hao123 

Motorola Droid X 
seve Kpern lo | i 
SEMC Xperia Ray Argunents 站 站 
HTC Desire 赛 户 端 : 拿 上 百度 | 输入 法 


HTC Tottoo - 
re ee < 极 简 版 | 迷彩 版 | 船 研 版 > 


[rue | [ws ] 所 已 面 - 
11.34 ”Opera Mobile Emulator 的 开始 界面 图 11.35 在 模拟 器 中 打开 百度 主页 


一 这 里 建议 要 使 用 分 辨 尼 高 一 些 的 屏幕 ( 指 的 是 电脑 屏幕) 。 如 1366*768 的 分 辩 率 ， 在 模拟 
l Samsung Galaxy S 时 面积 就 会 不 大 够 用 。 


11.3.5 ”应 用 jQuery Mobile 开发 的 页 面 
利用 jQuery Mobile 开发 的 应 用 主要 有 两 种 形式 。 


(1) 最 常用 的 一 种 是 与 传统 Web 一 样 以 网 页 的 形式 展示 出 来 。 尤 其 是 自 微 信 开 放 jssdk 以 
来 ， 一 部 分 PC 端的 网 页 也 开始 使 用 这 种 方式 开发 ， 都 收 到 了 不 错 的 效果 。 

(2) 第 二 种 形式 是 利用 工具 把 程序 打包 成 APP。 因 为 jQuery Mobile 仅仅 是 一 套 轻 量 级 的 开 
源 框架 ， 要 将 它 打包 成 apk 文件 ， 还 必须 依赖 其 他 工具 的 帮助 ， 如 PhoneGap。 


11.4 4 竺 


本 章 的 目的 是 证 明 使 用 跨 平 台 移动 开发 框架 是 一 个 非常 重要 的 选择 ， 而 jQuery Mobile 作为 
其 中 的 屹 楚 自 然 是 一 个 非常 好 的 工具 。 本 章 最 后 通过 一 些 实例 展示 了 jQuery Mobile 所 能 完成 的 
工作 ， 证 明了 jQuery Mobile 确实 是 一 款 非常 不 错 的 开发 框架 ， 让 读者 更 有 信心 去 学 好 它 。 
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上 一 章 我 们 介绍 了 jQuery Mobile 的 开发 入 门 ， 本 章 我 们 从 jQuery Mobile 提供 的 各 种 控件 入 
手 ， 开 发 属于 自己 的 移动 网 页 或 APP。 
本 章 主要 包括 以 下 内 容 : 


@ 如 何 选择 jQuery Mobile 页 面 中 的 元 素 ， 回 顾 jQuery 选择 元 素 的 方法 
@@ ”如 何在 APP 中 国定 工具 栏 ， 底 部 或 顶部 
@ jQuery Mobile 中 各 种 控件 的 使 用 ， 包 括 按钮 、 表 单 、 列 表 、 对 话 框 


12.1 从 选择 元 素 入 手 


本 节 开 始 利用 jQuery Mobile 控制 页 面 中 的 一 些 元 素 ，jQuery Mobile 的 操作 形式 和 jQuery 一 
样 ， 所 以 本 节 只 是 简单 回顾 一 些 jQuery 的 基础 。 


12.1.1 选择 页 面 中 的 元 素 
jQuery Mobile 选择 元 素 的 方法 很 多 ， 这 里 整理 出 以 下 几 种 : 
(1) 可 以 利用 CSS 选择 器 对 元 素 进 行 直接 选取 。 


(2) 可 以 利用 jQuery Mobile 的 特有 表达 式 对 元 素 进行 过 滤 。 
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jQuery Mobile 多 是 使 用 对 元 素 的 data-role 属性 进行 设置 的 方式 ， 来 确认 使 用 了 哪 种 控件 ， 
若是 在 页 面 中 有 如 下 内 容 : 

<div data-role=”page”></div> 

那么 ， 要 获取 这 个 元 素 需 使 用 如 下 语句 

$ (“div[gdata-role=page]”); 


在 HTML 5 中 单 引号 和 双 引 号 是 通用 的 ， 甚 至 在 表明 一 些 属性 的 值 时 可 以 不 用 引号 ， 但 是 一 
[ 旦 使 用 必须 成 对 ， 不 可 以 出 现 一 个 左 单 引号 配 一 个 右 双 引 号 的 现象 。 


12.1.2 ”设置 页 面 中 元 素 的 属性 


刚刚 获取 了 页 面 中 元 素 的 属性 ， 那 么 现在 就 应 该 来 为 元 素 设置 样式 了 ，jQuery 中 为 元 素 设 
置 样式 有 以 下 几 种 方法 。 


(1) 可 以 为 元 素 设置 宽度 和 高 度 ， 可 使 用 的 方法 有 width(width_x) 与 height(height_x)， 其 中 
的 参数 即 是 要 为 元 素 设置 的 尺寸 。 

(2) 可 以 直接 为 元 素 加 入 CSS 样式 ， 如 addClass("page_cat")， 即 将 名 为 page_cat 的 样式 设 
置 在 元 素 上 。jQuery Mobile 中 大 多 使 用 了 这 种 方法 。 

(3) 还 有 jQuery 自 带 的 CSS 类 可 以 单独 改变 元 素 的 某 样式 ， 但 是 由 于 使 用 过 于 烦琐 ， 并 
且 在 大 型 程序 中 不 是 很 好 维护 ， 因 此 用 得 较 少 。 


1 2 .2 应 用 jQuery Mobile 中 的 控件 


jQuery Mobile 提供 了 丰富 的 控件 ， 如 对 话 框 、 列 表 、 工 具 栏 、 表 单 控件 等 ， 这 些 控件 的 使 
用 都 非常 简单 ， 这 里 通过 一 些 例子 来 演示 如 何 使 用 这 些 控件 。 


12.2.1 在 界面 中 固定 一 个 工具 栏 


工具 栏 主要 包括 头 部 栏 和 底部 栏 ， 它 们 常常 被 固定 在 屏幕 的 上 下 两 侧 ， 用 来 实现 返回 功能 
各 功能 模块 间 的 切换 ， 对 于 界面 的 美化 也 有 重要 的 作用 。 工 具 栏 可 以 作为 页 面 上 下 两 侧 的 容器 ， 
无 论 是 在 传统 的 手机 APP 还 是 在 网 页 端 ， 工 具 栏 都 起 到 了 导航 栏 的 作用 。 开 发 者 可 以 利用 工具 
栏 来 展示 软件 所 具有 的 功能 ， 也 可 以 在 工具 栏 中 加 入 广告 来 为 自己 增加 收入 。 如 图 12.1 所 示 是 
-组 工具 栏 的 样式 。 
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Bar ther 


Bar ther 


Bartheme "pb” 


Bartheme "pb” 


Bartheme ” 


Bartheme " 


图 12.1 工具 栏 


本 在 实际 使 用 时 可 以 根据 需要 ， 让 它们 固定 在 页 面 的 某 个 位 置 。 


下 面 创 建 一 个 具备 固定 工具 栏 的 界面 〈 参 见 源 代 码 chapter12jqm_tool.html)， 代 码 如 下 。 


【示例 12-1】 具备 固定 工具 栏 的 界面 
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保存 后 ， 运 行 效果 如 图 12.2 所 示 。 第 13 行 我 们 指定 了 data-role="header"， 表 示 这 是 一 个 头 
部 栏 ， 第 28 属性 值 是 footer， 表 示 底 部 栏 。 为 了 让 两 个 工具 栏 可 以 固定 ， 我 们 指定 了 data- 
position 为 fxed， 这 样 可 以 防止 内 容 很 少时 底部 栏 会 显示 在 界面 的 中 央 。 


图 122 的 右 侧 可 以 看 到 一 个 滚动 条 ， 这 对 页 面 整体 的 美观 造成 了 一 定 的 影响 ， 实 际 上 页 面 


侧面 的 滚动 条 只 是 在 PC 端 浏览 器 上 会 很 明显 ， 在 手机 浏览 器 上 对 视觉 的 影响 几乎 可 以 忽 
略 。 读 者 可 以 在 自己 的 手机 上 打开 一 个 网 页 来 进行 验证 。 


读者 可 以 再 尝试 将 代码 第 16~27 行 重复 的 部 分 去 掉 ， 只 留 下 一 行文 字 ， 使 页 面 留 下 大 量 的 
室 白 ， 运 行 结果 如 图 12.3 所 示 。 

[xs [xm | 
在 页 面 中 加 入 工具 栏 在 页 面 中 加 入 工具 栏 
在 页 面 中 加 入 工具 栏 
在 页 面 中 加 入 工具 栏 
在 页 面 中 加 入 工具 栏 ， 
在 页 面 中 加 入 工具 栏 
在 页 面 中 加 入 工具 栏 


图 12.2 固定 位 置 的 工具 栏 图 12.3 ”页面 大 量 留 空 后 工具 栏 依然 固定 


观察 图 12.3 不 难看 出 ， 在 页 面 缺 少 内 容 存在 大 量 空白 的 情况 下 ， 尾 部 栏 顶端 与 页 面 内 容 底 
部 的 空白 被 自动 填充 了 相应 主题 的 背景 色 。 这 下 可 以 确认 工具 栏 确实 是 被 固定 在 屏幕 中 了 。 
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12.2.2 ”按钮 形式 的 菜单 


提 到 图 形 界 面 ， 矶 怕 用 户 最 熟悉 的 就 是 按钮 了 ， 链 接 和 按钮 都 能 实现 类 似 的 按钮 功能 ， 
jQuery Mobile 中 按钮 使 用 HTML 中 链接 的 标签 “<a>” 也 正 是 说 明了 这 一 点 。 
要 创建 一 组 按钮 ， 需 在 页 面 中 插入 如 下 代码 : 


下 面 来 预览 一 下 jQuery Mobile 中 的 按钮 样式 ， 如 图 12.4 所 示 。 


¢ Themea < Themeb @ Themec 


图 12.4 按钮 样式 
下 面 创建 一 个 简单 的 菜单 应 用 (参见 源 代码 chapter12yqm_button.html)， 内 容 如 下 。 
【示例 12-2】 菜单 应 用 
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本 例 将 界面 分 为 三 部 分 : 头 部 栏 、 主 体 和 底部 栏 。 其 中 代码 第 19 行 是 使 用 按钮 的 一 种 最 基 
本 的 方法 ， 除 了 要 使 用 标签 <a> 之 外 ， 还 要 为 按钮 加 入 属性 data-role=button， 只 有 这 样 才能 将 元 
素 泻 染 为 按钮 的 样式 。 在 标签 之 间 的 内 容 〈 如 “这 是 一 个 按钮 ”) 会 显示 为 按钮 的 标题 。 另 外 在 
默认 的 情况 下 ， 一 个 按钮 会 单独 占用 一 行 ， 因 此 按钮 看 上 去 会 比较 长 。 第 37~44 行 的 代码 中 使 
用 了 data-icon 属性 ， 这 里 用 来 指定 按钮 的 图 表 ， 如 果 使 用 默认 图 表 ， 则 使 用 data- 


icon="custom'" 。 
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加 下 | jQuery Mobile 默认 会 为 按钮 加 入 被 按 下 时 的 阴影 效果 。 | 


本 例 效 果 如 图 12.5 所 示 。 


12.5 菜单 界面 


除了 这 些 图 标 之 外 ，jQuery Mobile 还 为 开发 者 准备 了 其 他 的 图 标 样式 ， 笔 者 将 它们 整理 在 
表 12-1 中 。 
表 12-1 jQuery Mobile 自 带 的 图 标 


图 标示 例 
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( 续 表 ) 
图 标示 例 


12.2.3 ”表单 做 成 的 手 版 QQ 


表单 控件 源 自 于 HTML 中 的 <form> 标 签 ， 并 且 起 到 相同 的 作用 ， 用 以 提交 文本 、 数 据 等 无 
法 仅仅 靠 按钮 来 完成 的 内 容 ， 包 括 文本 框 、 滑 笔 、 文 本 域 、 开 关 、 下 拉 列 表 等 。 表 单 控件 如 图 
12.6~ 图 12.11 所 示 ， 这 里 列 出 了 表单 控件 中 的 大 部 分 元 素 。 
Text Input- 


图 12.6 文本 输入 框 


图 12.7 文本 域 


12.8 滑动 条 也 叫 滑 竿 


387 


构建 移动 网 站 与 APP: HTML 5+CSS 3+jQuery Mobile 入 门 与 实战 


12.9 开关 
Ds Standard: 7 di 
Cat ay 
EE 
Hampster Express: next day 


12.10 单 选 按钮 图 12.11 下 拉 列 表 


安 卓 版 QQ 的 登录 界面 一 直 是 UI 设计 者 必 学 的 一 个 例子 ， 因 为 它 结构 简单 且 美观 大 气 ， 如 
图 12.12 所 示 。 首 先 可 以 对 该 界面 做 一 个 简单 的 分 析 ， 其 页 面 由 一 个 图 片 、 两 个 文本 编辑 框 、 一 
个 按钮 以 及 若干 个 复 选 框 组 成 。 本 节 对 这 个 界面 做 了 进一步 简化 ， 简 化 掉 页 面 中 的 复 选 框 ， 具体 
实现 如 下 参见 源 代码 chapter12jqm_login.html)。 


站 

中 
号 SET v 
E32 


M| 记 住 密码 。 |M | 向 动 发 杂 
M | 搜 收 群 消息 |W | 开机 局 功 


隐身 登录 静音 登录 


注册 新 QQ 号 码 
12.12 手机 QQ 登录 界面 


【示例 12-3】 QQ 登录 界面 
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运行 结果 如 图 12.13 所 示 。 本 例 使 用 了 表单 控件 中 的 文本 编辑 框 ， 文 本 编辑 框 是 表单 元 素 中 
最 简单 的 一 种 ， 笔 者 将 以 它 为 例 来 介绍 表单 元 素 的 使 用 方法 。 


12.13 QQ 登录 界面 
在 使 用 表单 元 素 前 ， 首 先 需要 在 页 面 中 加 入 一 个 表单 标签 : 
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只 有 这 样 ， 标 签 内 的 控件 才 会 被 jQuery Mobile 默认 读 取 为 表单 元 素 ，action 属性 指向 的 是 
接受 提交 数据 的 地 址 ， 当 数据 被 提交 时 ， 就 会 发 送 到 这 里 。method 属性 标注 了 数据 提交 的 方 
法 ， 有 post 和 get 两 种 方法 可 供 选 用 。 

在 form 中 的 所 有 表单 元 素 都 是 使 用 input 标签 来 表示 的 ， 利 用 type 属性 来 对 它们 加 以 区 
分 ， 如 本 例 中 的 文本 编辑 框 的 type 属性 是 text。 另 外 还 要 给 每 个 控件 加 入 相应 的 name 和 id， 用 
于 对 提交 的 数据 进行 处 理 。 


一 为 了 便于 维护 ， 最 好 将 name 和 这 设 为 相同 的 值 。 


由 于 篇 幅 的 限制 ， 笔 者 将 提交 数据 的 后 台 代 码 省 略 了 可 以 用 PHP 或 ASPNET 等 后 台 语言 
实现 )， 现 在 给 出 一 段 利用 jQuery 获取 表单 内 容 的 脚本 。 加 入 脚本 后 的 代码 为 : 
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单 击 “ 登 录 ” 按 钮 ， 将 会 弹出 一 个 对 话 框 ， 其 中 显示 了 编辑 框 中 的 账号 密码 信息 ， 如 图 
12.14 所 示 。 


12.14 ”利用 脚本 获取 编辑 框 中 的 内 容 


391 


构建 移动 网 站 与 APP: HTML 5+CSS 3+jQuery Mobile 入 门 与 实战 


可 以 利用 编辑 框 的 id 来 获取 控件 ， 然 后 再 利用 val0 方 法 获取 编辑 框 中 的 内 容 ， 在 这 里 限制 
了 编辑 框 中 的 值 不 能 为 定 ， 实 际 上 还 应 该 利用 正则 表达 式 来 限制 账号 只 能 为 数字 ， 并 且 使 密码 内 
容 隐藏 ， 但 是 由 于 这 些 内 容 与 本 节 内 容 关 系 不 大 ， 在 此 不 做 过 多 讲解 。 

但 是 有 一 个 知识 点 是 不 得 不 提 的 ， 那 就 是 jQuery Mobile 实际 上 已 经 为 开发 者 封装 了 一 些 
用 来 限制 编辑 框 中 内 容 的 控件 ， 如 本 例 中 的 账号 编辑 框 的 type 修改 成 number， 虽 然 外 表 看 不 
出 有 什么 区 别 ， 但 当 在 手机 中 运行 该 页 面 ， 对 该 编辑 框 进行 输入 时 ， 将 会 自动 切换 到 数字 键 
盘 ， 而 将 type 属性 修改 为 password 时 ， 会 自动 将 编辑 框 中 的 内 容 转化 为 圆 点 ， 防 止 密码 被 旁 
边 的 人 看 到 。 

另外 还 可 以 将 type 的 属性 设置 为 tel 或 email， 查 看 一 下 会 产生 什么 样 的 效果 ， 这 里 就 不 一 
一 装 述 了 。 


| 虽然 jQuery Mobile 已 经 为 开发 者 封装 了 可 以 控制 内 容 的 编辑 框 ， 但 是 为 了 保证 应 用 的 安全 
| 性 ， 防 止 部 分 别有用心 的 用 户 绕 过 过 滤 而 造成 破坏 ， 必 须 保证 在 后 台 对 提交 的 数据 进行 二 次 
过 滤 ， 确 保 没有 恶意 数据 被 提交 。 


12.2.4 ”列表 形式 的 贴吧 


页 面 上 的 内 容 并 不 全 都 是 零星 排 布 的 ， 很 多 时 候 需要 一 个 列表 来 包含 大 量 的 信息 ， 比 如 说 音 
乐 的 播放 列表 、 新 闻 列表 、 文 章 列 表 等 。 如 图 12.15~ 图 12.17 是 一 些 在 jQuery Mobile 中 使 用 列 
表 的 例子 。 


1 The Godfather © 

2 Inception © 

3 The Good, the Bad and the Ugly © 

12.15 列表 1 
OE 
Broken Bells 
Nar Wickernamn © 
妒 人 局 Avery Johnson © 
Mi! Warning 
Poo © De 
ED poe 。 
图 12.16 “列表 2 图 12.17 列表 3 


列表 具有 比较 多 的 样式 ， 在 某 种 意义 上 它 可 以 作为 一 种 容器 ， 在 里 面 盛 放 各 种 布局 ， 因 此 比 
较 灵活 ， 但 是 也 比较 复杂 。 
百度 贴吧 的 标题 实际 上 就 是 一 组 列表 ， 如 图 12.18 所 示 为 jQuery Mobile 贴吧 的 一 张 截图 。 
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先 月 障 转 ， 秋 去 冬 来 ; 棒 夜 不 眠 种 守 的 日 里 水 雪 不 语 寒 夜 的 信 瑟 ， 谁 在 宿命 里 膏 … 辕 美 丽 在 92 歌 11-10 


9 出 平 意料 的 变故 令 我 目眩 心慌 三 美丽 在 08 

一 时 间 血 泪 奔 涌 。 原来， 人 世间 有 这 么 多 的 站 欢 高 合 ， 你 是 和 专属, 那么 兽 经 属 … 。。 字 美 而 在 38 119 
0 因为 有 你 陪 我 将 情思 无 尽 的 放逐 美丽 在 有 

所 以 名 在 现实 中 如 瞪 训 上: 因为 有 你 天 长 地 久 的 时 攻 ， 所 以 风 儿 阁 展 了 径 灵 的 对 导 美 丽 在 3 有。 119 
0 让 爱 的 波澜 壮阔 永远 的 川流不息 美丽 在 

让 要 的 下 各 村 说 永远 的 川 训 不 息 因为 有 作 了 我 难听 古老 的 童 美丽 在 3 到 11.9 
9 跳 求 : 安 卓 版 mobile mouse pro 适合 4 CC 人 上 系统 的 软件 happyboysg9 

踪 求 : 安 卓 版 moblle mouse pro 适合 4.0 以 上 系统 的 软件 ， 或 者 请 高 手 桂 mobile mo… Ee 119 
65 我 是 他 mobile 开 发 的 ， 但 此 帖 吧 让 我 惊叹 。。 £ ginpq 

美丽 在 a 了 11.9 

1 入 冷 的 @® 记 LCAve 

好 淮 明 好 冷 明 好 冷 明 美丽 在 a8 聊 113 
0 Mobile 话 还 没有 说 完 二 美丽 在 8 到 

正月 初 一 早 ， 长 江 流域 的 人 家 吃 成 园 ， "成 包 、 汤 图 汤 图 学 出 水 面 ， 汤 也 学 起 来 … 美丽 在 98 欢 。118 
0 Windows moblle 6.5 手 机 系统 巴 纺 vs 友 要 

二 灶 的 谁 会 玩 Windows mobile 6 5 手机 系统 (区 淮 会 玩 HTC 9138) 求 导 助 啊 我 要 … 牟 入 vs 纵 壤 。。8-16 


12.18 百度 jQuery Mobile 吧 的 帖子 列表 
除了 这 些 之 外 ， 一 些 新 闻 网 站 也 会 将 重要 的 新 闻 在 主页 上 展示 出 来 ， 如 图 12.19 所 示 。 


实时 热点 训 换 一 换 

“ 刘 环 震 晒 睡眠 照 国 “ 王 思 陪 再 答 韩 女 团 国 
"3 岁 哥 哥 压 死 妹妹 国 “百度 大 数据 交响 乐 
“大妈 抓 老鼠 审问 国 “ 美女 秀 健身 照 走红 

" 小 S 向 罗志祥 道 烙 。 “宿舍 设 刷卡 者 机 

“ 曹 颍 不 后 悔 跳槽 。。 “德国 大 规模 性 侵 奉 

“" 抢 红包 被 罚 500 元 。 “广州 的 哥 夜 班 着 死 

“ 延吉 高 中 择 场 裂纹 ， 梦 少 皇 低调 结婚 

* 昆 凌 变 身 美人 鱼 。。 “ 胜利 被 骗 20 亿 


12.19 资讯 站 上 的 一 组 新 闻 列表 


相 比 之 下 ， 图 12.19 所 示 的 列表 非常 简单 ， 只 有 一 个 标题 ， 而 图 12.18 所 示 的 帖子 列表 就 比 
较 复杂 了 。 本 节 介 绍 列表 控件 最 简单 的 用 法 ， 即 用 列表 控件 来 实现 一 个 最 简单 的 新 闻 列 表 (参见 
源 代码 chapter12Yqm_list.html)。 


【示例 12-4】 新 闻 列 表 
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运行 结果 如 图 12.20 所 示 。 在 使 用 标签 时 ， 首 先 要 在 页 面 中 加 入 一 个 标签 <ul data- 
role='listview"></ul>， 之 后 就 可 以 在 其 中 加 入 任意 数量 的 <l> 标 签 ， 其 中 的 内 容 会 以 一 种 类 似 按 
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钮 的 形式 显示 出 来 。 


安徽 回应 警察 目 畦 少女 被 杀 : 不 护 .… 


深圳 居民 为 省 镜 开 般 到 香港 加 油 … 
海南 卫生 厅 干 部 体验 看 病 难 : 候 2..… 


名 
® 
© 
延安 市 长 回应 前 山 建 新 城 . 保证 .。 重 
上 海 今日 于 高 温 暴 十 雷电 大 风 轮 .…。 必 
美国 安 局 人 员 被 呈 省 用 监控 商 源 . 。 转 
金正 思 视察 朝鲜 最 新 战 届 从 军舰 .。 全 
®. 


美 “51 区 " 认 员 称 内 有 9 架 飞 碟 首 见 … 


今 口 新 闻 。 国 向 新 闻 。 国际 新 闻 。 。 设置 


图 12.20 简单 的 新 闻 列表 


蕊 细心 的 读者 会 发 现在 <ul> 标 签 处 的 缩 进 有 点 不 正常 ， 这 是 由 于 列表 术 休 在 内 容 相 显示 人 
不 正常 ， 笔 者 特意 在 此 处 留 出 一 段 空 白 来 提醒 读者 一 定 要 注意 。 如 图 12.21 所 示 为 将 列表 
放 在 内 容 栏 中 的 效果 。 


课 吉 居民 为 省 钱 开 角 到 香港 加 油 被 .， 四 
海南 卫生 厅 干 部 体验 看 病 难 : 候 2 小 .。 图 
外 去 市 长 回应 前 山 建 新 域 。 保 证 不 .， 轩 
上 海 今日 于 高 温 攻 十 雷电 大 风 轮 亚 ..， 图 
美国 安 局 人 员 被 只 曾 用 监控 资源 监 .， 图 
金正 思 视 家 朝鲜 最 新 战 纶 半 军 级 科 ..。 图 
美 “51 区 " 库 员 称 内 有 9 汞 飞 大 首 见 ..…。 图 


巴基斯坦 释放 337 名 印度 在 把 人 员 。。 司 


$ 日 站 闻 。 国 册 新 间 。 国际 g 问 。。 总 加 固 
NU 图 12.21 将 列表 放 在 内 容 栏 中 显示 效果 不 佳 BB 


12.2.5 ”使 用 对 话 框 实现 一 个 相册 

通过 前 面 的 例子 ， 我 们 可 以 熟悉 jQuery Mobile 的 基本 用 法 ， 这 里 创建 一 个 基于 jQuery 
Mobile 对 话 框 实现 的 相册 ， 让 读者 也 了 解 下 对 话 框 的 使 用 。 

创建 一 个 页 面 〈 参 见 源 代 码 chapter12 Wiqm_dialogPhoto.html)， 内 容 如 下 。 


【示例 12-5】 相册 
01 <!DOCTYPE html> 
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其 中 pl.jpg~p6.jpg 均 是 笔者 在 百度 图 片 中 找到 的 图 片 ， 将 它们 下 载 到 源 代码 下 的 images 文 
件 夹 中 ， 运 行 后 的 效果 如 图 12.22 所 示 。 


图 12.22 相册 界面 
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二 要 注意 图 片 名 称 一 定 得 是 p(n)jpg， 其 中 (n) 表示 的 是 1~6 中 的 某 个 数字 。 | 


单 击 页 面 中 的 某 张 图 片 ， 该 图 片 将 会 以 对 话 框 的 形式 被 放大 显示 ， 如 图 12.23 所 示 。 代 码 第 
12~14 行 展示 了 页 面 中 一 个 图 片 的 显示 ， 它 利用 一 对 a 标签 将 一 个 图 片 包 庄 在 其 中 ， 这 就 使 得 其 
中 的 图 片 具 有 了 按钮 的 某 些 功 能 ， 如 在 本 例 中 就 是 靠 单 击 图 片 来 呼出 对 话 框 。 

另外 有 心 的 读者 也 许 已 经 注意 到 ， 在 代码 第 12 行 出 现 了 一 个 新 的 属性 data-position- 
to="window"， 它 的 作用 是 使 弹出 的 对 话 框 位 于 屏幕 正中 ， 而 不 再 是 位 于 呼出 这 个 对 话 框 的 按钮 
附近 。 如 图 12.24 所 示 为 取消 该 属性 后 的 效果 。 


-ep 


12.23 ”对 话 框 中 的 图 片 图 12.24 对 话 框 不 再 位 于 页 面 的 中 央 


小 结 


本 章 终于 真正 开始 开发 应 用 了 ， 虽 然 只 是 一 小 步 ， 但 是 已 经 为 各 位 开发 应 用 打下 了 坚实 的 基 
础 。 只 要 迈 出 这 一 小 步 ， 剩 下 的 自然 是 康 庄 大 道 。 另 外 ， 本 章 对 于 各 种 控件 的 介绍 确实 有 点 笼 
统 ， 但 每 一 个 控件 基本 上 都 通过 一 个 实际 的 例子 来 演示 ， 相 信 读 者 有 了 jQuery 基础 后 便 能 对 
jQuery Mobile 很 快 地 上 手 了 。 
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本 章 将 介绍 jQuery Mobile 除了 控件 之 外 的 另 一 个 重要 部 分 一 一 布局 。 经 过 前 面 的 学 习 ， 读 
者 应 该 已 经 发 现 了 一 个 事实 ， 那 就 是 jQuery Mobile 中 的 大 多 数控 件 都 要 占 掉 整 整 一 行 的 位 置 ， 
在 大 多 数 情况 下 ， 这 样 非常 美观 ， 但 是 也 有 一 些 情况 会 影响 用 户 的 操作 体验 。 针 对 此 问题 ， 
jQuery Mobile 定义 了 专门 的 方法 ， 将 控件 分 栏 或 者 折合 ， 以 求 在 最 小 的 空间 内 达到 最 佳 的 用 户 
体验 。 

本 章 还 将 介绍 利用 jQuery Mobile 的 布局 提高 交互 性 的 技巧 ， 并 利用 这 些 技巧 来 完成 一 些 实 
际 案例 。 本 章 主要 包括 以 下 内 容 : 


@ ”将 页 面 元 素 并 排放 置 的 布局 方法 
@ ”利用 折 熙 的 方式 对 页 面 元素 进 行 隐藏 或 展示 的 方法 
@ 利用 元 素 折 司 的 方式 实现 手风琴 效果 的 方法 


本 .1 QQ 登录 界面 


第 12.2.3 节 曾 给 出 一 个 简单 的 QQ 登录 界面 ， 如 图 13.1 所 示 。 
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图 13.1 简单 的 QQ 登录 界面 


熟悉 手机 QQ 的 读者 一 定 知道 ， 手 机 QQ 的 登录 界面 除了 登录 按钮 以 外 ， 还 会 附带 一 个 内 容 
为 “忘记 密码 ”的 按钮 ， 与 “登录 ”按钮 并 列 一 排 。 根 据 之 前 所 学 的 jQuery Mobile 知识 来 看 ， 
这 种 设计 是 无 法 实现 的 。 但 是 接 下 来 的 例子 (参见 源 代码 chapterl3\qqtesthtml) 将 完全 利用 
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jQuery Mobile 所 提供 的 功能 实现 这 样 的 设计 。 
【示例 13-1】 QQ 登录 
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运行 结果 如 图 13.2 所 示 。 


图 13.2 ”两 个 按钮 并 排 排列 的 QQ 登录 界面 


因为 这 是 在 之 前 介绍 的 例子 上 所 做 的 修改 ， 因 此 对 于 代码 部 分 就 不 做 过 多 讲解 了 ， 唯 一 需要 
注意 的 是 代码 第 21~30 行 。 

fieldset 标签 是 jQuery Mobile 专门 用 来 为 控件 分 栏 的 标签 ， 因 为 移动 设备 的 屏幕 通常 比较 
窄 ， 所 以 这 种 多 栏 布局 不 被 jQuery Mobile 设计 者 所 推荐 ， 但 许多 时 候 又 不 得 不 这 样 做 。 读 者 可 
以 尝试 对 本 节 范 例 中 的 代码 做 一 些 修改 ， 将 分 栏 排列 的 两 个 按钮 改 成 两 个 按钮 上 下 排列 ， 运 行 后 
会 发 现 这 种 设计 简直 难看 得 有 些 恐 怖 。 另 外 由 于 屏幕 空间 的 限制 ， 很 多 时 候 也 不 可 能 让 一 个 无 关 
紧要 的 按钮 占用 太 大 的 空间 ， 这 时 就 是 分 栏 布局 发 挥 作用 的 时 刻 了 。 

在 代码 第 21 行 ，fieldset 标签 有 一 个 属性 class="ui-grid-a"， 该 属性 规定 了 一 栏 中 所 包含 控件 
的 数量 ， 由 于 每 栏 中 控件 的 数量 最 少 是 两 个 〈 因 为 如 果 是 一 个 就 没 必 要 分 栏 了 )， 因 此 就 用 a 来 
代表 2 个 ， 那 么 class="ui-grid-b" 就 代表 了 一 行 中 包括 3 个 控件 。 

在 第 23 行 和 第 27 行 的 div 标签 中 ,分别 有 属性 class="ui-block-a" 和 class="ui-block-a"， 它 
们 标识 了 该 标签 占据 了 所 在 行 中 的 第 1 个 位 置 和 第 2 个 位 置 ， 假 如 分 成 了 3 栏 甚至 是 4 栏 ， 那 么 
就 会 有 相应 的 class="ui-block-c" 和 class="ui-block-d" 了 。 

有 时 候 也 许 会 需要 如 图 13.3 所 示 的 布局 ， 此 时 代码 如 下 : 


忘记 密码 | 


13.3 3 个 按钮 排列 的 一 种 布局 
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仔细 观察 会 发 现 按钮 的 两 侧 并 不 是 对 齐 的 ， 这 会 让 用 户 觉 得 不 是 非常 完美 ， 因 此 jQuery 
Mobile 也 定义 了 相应 的 方法 来 解决 这 一 问题 。 
阅读 以 下 代码 : 


效果 如 图 13.4 所 示 。 


GE = 
13.4 上 下 按钮 是 对 齐 的 


仔细 观察 图 13.3 和 图 13.4， 会 发 现 两 者 之 间 有 一 点 细微 的 差别 ， 在 图 13.4 中 上 下 按钮 是 整 
齐 排列 的 。 在 新 的 代码 段 中 加 入 一 行 : 


它 的 作用 就 是 声明 一 个 空白 的 分 栏 ， 来 使 独立 的 按钮 两 侧 增 加 一 段 较 小 的 缩 进 ， 使 其 与 分 栏 
的 按钮 对 齐 ， 能 够 起 到 很 好 的 美观 效果 。 


这 其 实 可 以 理解 成 是 一 种 分 栏 数 为 1 的 情况 ，jQuery Mobile 的 开发 者 有 点 画蛇添足 了 。 
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1 3 引 .2 简洁 通讯 录 


上 一 节 和 大 家 一 起 学 习 了 使 用 fieldset 标签 分 栏 显示 内 容 的 方法 ， 可 是 上 一 节 每 一 行 中 的 各 
个 栏目 的 宽度 都 是 平均 分 配 的 ， 这 一 点 仍然 限制 了 一 些 开发 者 的 自由 。 如 果 想 在 一 行 中 插入 不 同 
宽度 的 内 容 ， 就 会 让 开发 者 有 些 束手无策 了 。 

难道 真 的 没有 办 法 了 吗 ? 当然 不 是 。jQuery Mobile 毕竟 是 一 个 基于 jQuery 的 开源 框架 ， 它 
所 做 的 只 是 让 开发 者 省 去 了 设计 控件 的 苦恼 ， 但 是 它 对 每 一 个 控件 的 操作 都 是 透明 的 ， 完 全 可 以 
通过 对 CSS 的 修改 来 改变 jQuery Mobile 对 原 有 控件 的 定义 ， 以 改变 它们 的 外 观 。 

下 面 就 以 一 款 简单 的 手机 通讯 录 为 例 〈 参 见 源 代码 chapter13\phone.html)， 来 介绍 利用 CSS 


改变 分 栏 布 局 的 方法 。 


【示例 13-2】 手机 通讯 录 
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运行 结果 如 图 13.5 所 示 。 

上 述 代 码 将 每 一 行 分 成 了 3 栏 ， 这 3 栏 所 占 的 比例 分 别 为 20%、60% 和 20%， 如 代码 第 
11~22 行 所 示 。 通 过 阅读 HTML 部 分 代码 (第 38、43 和 49 行 ) 可 知 ，jQuery Mobile 通过 读 取 
CSS 中 ui-block-a、ui-block-b 和 ui-block-c 3 处 样式 对 div 的 样式 进行 泻 染 ， 因 此 可 以 重 写 这 3 处 
样式 ， 由 于 目前 对 于 样式 没有 太 多 的 要 求 ， 因 此 仅仅 重 写 了 宽度 。 

jQuery Mobile 的 分 栏 有 一 个 不 是 非常 完善 的 地 方 ， 读 者 可 以 试 着 去 掉 范例 中 的 第 23~26 
行 ， 运 行 后 的 效果 如 图 13.6 所 示 。 从 图 中 可 以 清楚 地 看 出 ， 在 没有 设置 高 度 的 情况 下 ， 各 栏目 
仅仅 使 自己 的 高 度 适应 其 中 的 内 容 而 不 考虑 与 相 邻 的 元 素 高 度 匹 配 。 因 此 在 使 用 分 栏 布局 时 ， 如 
果 不 是 在 各 栏目 中 使 用 相同 的 元 素 〈 如 各 栏目 均 用 来 放置 按钮 )， 那 么 一 定 要 设置 栏目 的 高 度 。 


国 
和 
© 
及 国 活 珊 
© 


令狐冲 全 牟 ® 
局 ， 9 
135 利用 CSS 改变 分 栏 布局 图 13.6jQuery Mobile 分 栏 布局 的 一 处 缺陷 


加 贡 。 第 23 行 所 重 写 的 uibarc， 是 c 主题 下 栏目 的 背景 颜色 以 及 边框 等 样式 ,jQuery Mobile 给 该 | 


样式 所 设计 的 效果 不 如 其 他 控件 那么 华丽 。 因 此 笔者 建议 在 正式 项 目 中 尽量 不 用 该 样式 ， 或 
将 该 样式 完全 重 写 后 再 使 用 。 
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为 了 更 好 地 呼应 本 节 的 主题 ， 本 例 放弃 了 直接 通过 修改 标签 的 style 来 设计 样式 ， 而 是 依旧 
采用 了 修改 CSS 的 方式 来 修改 字体 的 样式 ， 希 望 读者 能 仔细 体会 。 


本 .了 完美 九宫 格 


不 知道 为 什么 ， 一 向 严谨 的 jQuery Mobile 在 分 栏 这 一 部 分 总 是 让 笔者 觉得 有 一 点 不 够 用 
心 。 比 如 在 上 一 节 就 展示 了 一 个 jQuery Mobile 分 栏 功能 非常 值得 吐槽 的 一 处 缺陷 。 为 了 改变 这 
一 状态 ， 本 节 决 定 介绍 一 个 能 够 完美 应 用 jQuery Mobile 分 栏 效果 的 例子 一 一 九宫 格 。 如 图 13.7 
所 示 为 手机 人 人 网 客户 端的 一 处 九宫 格 界面 。 


一 一 


入 
网 


图 13.7 手机 人 人 网 的 九宫 格 界面 


相信 对 学 习 过 分 栏 布局 的 各 位 来 说 ， 利 用 jQuery Mobile 打造 一 款 具 有 九宫 格 布局 的 界面 不 
会 很 难 ， 那 么 就 动手 尝试 一 下 吧 。 如 果 现 在 还 没有 掌握 分 栏 布局 的 知识 点 也 不 要 紧 ， 可 以 翻 一 翻 
前 面 的 内 容 或 直接 通过 下 面 的 例子 来 重新 学 习 分 栏 布 局 的 知识 〈 参 见 源 代 码 chapter13\ 九 宫 
格 .html)。 


【示例 13-3】 九宫 格 
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50 </body> 
51 </html> 
运行 效果 如 图 13.8 所 示 。 


九宫 格 界 面 次 天 


OCOD 
人 
Fe 


图 13.8 利用 jQuery Mobile 实现 的 九宫 格 


代码 部 分 非常 简单 ， 也 没有 什么 复杂 的 内 容 ， 可 以 当 作对 分 栏 布局 的 一 次 复习 。 本 例 中 由 于 
每 一 个 栏目 仅仅 包含 一 张 图 片 ， 而 每 张 图 片 的 尺寸 又 都 是 一 样 的 ， 因 此 就 没有 必要 通过 设置 栏目 
的 高 度 来 保证 布局 的 完整 了 。 当 然 也 许 会 有 读者 认为 各 个 栏目 之 间 间 距 太 小 ， 可 以 通过 在 页 面 中 
重 写 ui-block-a、ui-block-b 和 ui-block-c 3 处 样式 的 方法 来 改变 它们 之 间 的 间距 ， 也 可 以 通过 修 
改 图 片 的 空白 区 域 来 使 图 标 变 小 。 


| 本 例 实现 的 界面 效果 非常 完美 ， 除了 jQuery Mobile 确实 适合 开发 这 类 界面 外 ， 与 本 例 所 选 
【 用 的 图 标 也 有 英 大 的 关系 。 因 此 在 开发 时 多 借鉴 网 上 的 优秀 素材 也 是 一 种 聪明 的 做 法 。 


1 本 .和 可 以 折 杰 的 QQ 好 友 列 表 


除了 分 栏 之 外 还 有 一 种 更 强大 的 方式 ， 可 以 让 开发 者 在 尽量 小 的 空间 内 装 下 更 多 的 内 容 ， 那 
就 是 折 对 。 说 到 折合 ， 一 个 经 典 的 例子 就 是 QQ 上 的 好 友 列表 ， 可 以 通过 分 组 将 好 友 分 成 不 同 的 
组 ， 然 后 将 所 有 的 好 友 列 表 隐 藏 起 来 ， 需 要 查找 该 组 中 的 好 友 时 再 将 它 展开 。 如 图 13.9 所 示 为 
QQ 的 好 友 列表 。 

在 几 年 前 用 JavaScript 来 实现 类 似 的 效果 ， 还 是 有 一 定 难 度 的 ， 但 是 用 jQuery Mobile 可 以 
轻易 地 实现 这 样 的 效果 。 究 其 原因 ， 自 然 还 是 jQuery Mobile 为 了 方便 开发 者 而 提前 为 开发 者 定 
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义 好 了 相应 的 标签 ， 这 就 是 折叠 组 标记 。 


图 13.9 QQ 好 友 列 表 


本 节 将 利用 jQuery Mobile 的 折合 组 标记 来 实现 一 个 类 似 QQ 的 可 折 车 好 友 列 表 参见 源 代 
码 chapter13\ QQ 好 友 列表 .html)， 代 码 如 下 所 示 。 


【示例 13-4】 可 折 辣 的 QQ 好 友 列表 
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区 第 13 章 APP 的 布 


运行 结果 如 图 13.10 所 示 。 
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© zs 单 


图 13.10 可 以 折合 的 好 友 列 表 


单 击 屏幕 上 的 “变形 金刚 ”或 者 “ 黑 名 单 ”， 其 中 的 内 容 就 会 展开 ， 而 男 一 栏 中 的 内 容 则 会 
自动 折 营 。 虽 然 样 子 上 还 是 有 一 定 的 区 别 ， 但 在 功能 上 已 经 实现 了 类 似 QQ 的 好 友 列 表 。 

第 11~33 行 是 本 范例 会 用 到 的 一 些 样式 ， 主 要 是 分 栏 布局 的 设置 ， 以 使 好 友 列 表 保 持 为 左 侧 
头像 、 右 侧 好 友 名 和 个 性 签名 的 两 栏 式 布局 。 

第 37~93 行 是 本 节 的 核心 内 容 ， 其 中 第 37 行 的 <div data-role="collapsible-set"> 定 义 了 该 部 分 
是 可 以 折 受 的 ， 但 并 不 是 指 此 标签 作为 一 个 整体 来 被 折 车 ， 而 是 将 它 作为 一 个 容器 。 举 例 来 说 ， 
范例 中 的 “变形 金刚 ”和 “ 黑 名 单 ” 两 个 列表 都 是 可 以 折 半 的 ， 而 它们 都 是 被 包 里 在 <div data- 
role="collapsible-set"></div> 中 的 。 注 意 看 第 38 和 67 行 <div data-role="collapsible” data- 
collapsed="true">， 这 两 个 标签 内 的 内 容 才 是 作为 最 小 单位 被 折合 的 。 

仅仅 是 能 够 折 针 那 也 是 不 够 的 ， 因 为 当 所 有 的 内 容 都 被 折合 隐 藏 了 ， 还 需要 一 个 标识 来 告诉 
用 户 被 隐藏 的 是 什么 内 容 。 这 就 需要 为 每 一 处 折 车 的 内 容 做 一 个 “标题 "， 这 就 是 第 39 行 和 第 
68 行 <h3> 标 签 的 作用 所 在 ， 当 然 如 果 设 计 成 使 用 <h1>~<h4> 都 是 可 以 的 。 
另外 ， 再 观察 范例 中 第 38 行 和 67 行 的 代码 ， 看 能 不 能 发 现 它们 的 不 同 。 
一 RE - 一 


为 了 便于 观察 ， 笔 者 干脆 将 这 两 句 代码 列 在 了 上 面 ， 这 样 就 可 以 轻易 地 发 现 原来 它们 的 
data-collapsed 属性 的 值 是 不 同 的 。 将 data-collapsed 翻译 成 汉语 大 概 就 是 “内 容 是 否 折 车 ”的 意 
思 ， 这 样 就 非常 好 理解 了 。 那 么 ， 现 在 就 把 两 个 标签 中 的 内 容 全 部 展示 出 来 ， 将 两 组 标签 中 的 
data-collapsed 全 部 设置 为 false 是 否 可 行 呢 ? 

实践 之 后 发 现 这 样 是 行 不 通 的 ， 尽 管 已 经 做 出 了 修改 ， 但 仍然 只 有 一 组 栏目 是 展开 的 ， 结 合 
笔者 之 前 所 提 到 的 当 单 击 另 一 组 标题 时 ， 之 前 打开 的 内 容 会 被 隐藏 ， 相 信 读 者 已 经 有 了 结论 ， 即 
同一 时 刻 只 有 一 组 内 容 可 以 被 展开 。 

是 不 是 就 没有 办 法 将 这 些 折 装 项 全 部 展开 了 呢 ， 其 实 是 可 以 的 。 尝 试 将 范例 中 第 37 行 的 
<div data-role="collapsible-set"> 和 第 96 行 与 之 对 应 的 </div> 去 掉 ， 就 会 发 现 两 个 折合 项 可 以 同时 
展开 了 。 这 个 道理 很 简单 ， 因 为 collapsible-set 并 没有 折 双 内 容 的 作用 ， 它 只 是 容器 ， 其 具备 两 
个 作用 : 
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(1) 将 折 释 的 栏目 按 组 容纳 在 其 中 。 
(2) 保证 其 中 的 内 容 同 时 仅 有 一 项 是 被 展开 的 。 
因此 ， 只 要 将 这 部 分 内 容 删 去 ， 就 可 以 让 列表 中 多 个 项 同时 展开 了 。 


本 .5 展开 图 标 


现在 回 过 头 来 看 图 13.8 中 的 好 友 列 表 标 题 ， 会 发 现在 标题 的 左 侧 还 有 一 个 “+” 或 “-” 样 
式 的 图 标 ， 该 图 标 用 来 标识 当前 列表 展开 或 折 共 的 状态 (如 图 13.11 所 示 )。 


EE 


图 13.11 栏目 标题 的 图 标 


然而 很 多 时 候 ， 开 发 者 需要 使 用 其 他 样式 的 图 标 ， 或 者 希望 将 图 标 转移 到 其 他 位 置 。 本 节 就 
将 给 出 一 个 这 样 的 例子 参见 源 代码 chapter13\ 展 开 图 标 .html)。 


【示例 13-5】 展开 图 标 
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运行 结果 如 图 13.12 所 示 。 


小 的 新 其 村 新 


图 13.12 折 肥 图 标的 高 级 设置 
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本 范例 没有 引用 实际 的 例子 ， 仅 仅 是 利用 折 又 的 知识 将 3 组 列表 进行 了 折 县 ， 但 是 可 以 看 出 
它们 有 很 大 的 不 同 。 

每 一 组 折 车 内 容 的 标题 都 被 默认 地 定义 成 了 按钮 的 样式 ， 但 是 通过 比较 第 1 组 折 车 内 容 的 标 
题 可 以 看 出 ， 它 明显 比 其 他 两 组 在 高 度 上 要 小 许多 。 再 回 过 头 来 看 范例 代码 的 第 14 行 中 data- 
mini 属性 被 设置 为 tue， 这 个 属性 已 经 不 是 第 一 次 遇 到 了 ， 当 页 面 元 素 被 加 入 这 一 属性 ， 大 多 会 
在 尺寸 上 有 所 减 小 。 


民 元 data-mini 属性 是 jQuery Mobile 许多 控件 所 通用 的 属性 。 | 


第 2 组 元 素 的 标题 虽然 在 大 小 上 没有 什么 变化 ， 但 是 它 的 图 标 却 变 了 一 个 样子 。 按 照 以 往 的 
经 验 ， 要 修改 按钮 上 的 图 标 会 用 到 button-icon 属性 。 注 意 范例 的 第 23 行 有 属性 data-collapsed- 
icon="arrow-d" data-expanded-icon="arrow-u"， 看 上 去 是 为 折 营 内 容 准 备 了 两 组 不 同 的 图 标 分 别 表 
示 内 容 折 芝 和 展开 时 的 状态 ， 经 过 笔者 的 验证 也 的 确 是 这 样 的 。 


| 实际 上 不 使 用 button-icon 而 继续 沿用 已 经 很 熟悉 的 data-icon 属性 来 定义 图 标 也 是 可 以 的 ， 
l 只 不 过 这 样 一 来 图 标 就 无 法 标识 内 容 折 番 或 展开 的 状态 了 ， 因 此 笔者 不 建议 这 样 使 用 。 


再 来 看 最 后 一 组 折合 内 容 的 标题 “仔细 看 图 标的 位 置 ”” 可 以 发 现在 该 标题 中 虽然 样式 没有 
改变 但 是 图 标的 位 置 却 被 移 到 了 右 侧 ， 这 是 因为 代码 第 32 行 的 data-iconpos 被 设置 为 right， 即 
图 标 方向 为 右 侧 。 这 一 点 与 按钮 图 标 方位 的 设置 仍然 是 一 致 的 ， 甚 至 可 以 将 图 标 位 置 设置 为 上 方 
或 者 是 下 方 。 

当然 ， 这 3 种 效果 不 仅仅 能 单独 使 用 ， 还 可 以 将 它们 混合 使 用 ， 再 配 上 主题 颜色 等 属性 就 能 
打造 出 华丽 多 变 的 界面 效果 了 。 


1 3.6 Metro 效果 


在 第 13.3 节 ， 笔 者 介绍 了 一 种 利用 jQuery Mobile 实现 的 九宫 格 效果 ， 还 有 一 种 非常 类 似 九 
富 格 而 且 更 加 流行 的 手机 界面 Metro， 如 图 13.13 所 示 为 一 个 手机 使 用 Metro 界面 的 例子 。 

Metro 是 微软 由 纽约 交通 站 牌 获得 灵感 所 创造 的 一 种 简洁 的 界面 ， 它 的 本 意 是 以 文字 的 形式 
承载 更 多 的 信息 ， 这 一 点 在 Windows XP 和 Windows 7 的 设计 上 均 有 所 体现 。 然 而 真正 让 Metro 
界面 被 国内 设计 所 关注 的 ， 还 是 Windows 8 中 那 种 以 色 块 为 主 的 排 布 方式 ， 以 及 WP (Windows 
Phone) 系列 手机 的 主 界面 。 最 近 一 段 时 间 ，Metro 界面 也 确实 在 移动 开发 领域 比较 流行 ， 但 是 
在 利用 HTML 5 制作 Metro 界面 时 还 是 会 遇 到 一 点 麻烦 ， 本 节 将 以 两 个 例子 来 说 明 。 
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GE 
| 


| 


®) 


ON: 


图 13.13 一 个 使 用 Metro 界面 的 例子 


13.6.1 利用 分 栏 布局 


首先 给 出 一 种 利用 分 栏 布局 的 方式 完成 Metro 界面 效果 的 例子 〈 参 见 源 代 码 chapter13\ 分 栏 
布局 html)， 请 读者 仔细 思考 。 


【示例 13-6】 展开 图 标 
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运行 结果 如 图 13.14 所 示 。 


图 13.14 ”利用 分 栏 实现 的 Metro 布局 
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思路 非常 简单 ， 就 是 利用 jQuery Mobile 的 分 栏 功能 将 每 一 行 分 为 两 部 分 ， 然 后 利用 分 栏 时 
每 一 栏 的 高 度 恰好 满足 其 中 所 填充 内 容 高 度 这 一 特点 ， 在 其 中 放 入 一 张 正方 形 的 图 片 ， 这 就 形成 
Metro 的 布局 。 在 实际 使 用 时 还 可 以 通过 修改 每 一 栏 所 占 的 比例 来 调整 色 块 所 排列 的 位 置 。 

看 上 去 非常 简单 ， 但 这 样 其 实 有 一 个 非常 严重 的 问题 ， 就 是 色 块 的 高 度 是 不 可 调 的 ， 也 就 是 
说 一 旦 固定 了 色 块 的 数量 ， 便 无 法 保证 色 块 在 高 度 上 不 会 超出 屏幕 的 范围 。 假 如 说 色 块 数量 非 常 
多 ， 这 也 许 不 是 什么 问题 ， 比 如 说 WP 手机 的 主 界面 上 往往 有 几 十 个 甚至 上 百 个 色 块 ， 内 容 超 
出 并 没有 什么 不 妥 ， 可 是 在 开发 手机 应 用 时 ， 往 往 只 需要 6 个 或 8 个 色 块 ， 这 样 一 来 ， 如 果 有 一 
点 点 超出 屏幕 范围 的 内 容 就 会 让 用 户 觉 得 不 适应 。 因 此 本 例 所 用 的 方法 虽然 简单 ， 却 并 不 是 一 个 
非常 好 的 方法 。 


当然 ， 如 果 不 打 算 将 应 用 封装 成 apk 文件 使 用 ， 而 仅仅 是 作为 Web 应 用 的 话 ， 内 容 是 否 超 


出 屏幕 范围 倒 也 不 至 于 有 太 大 的 影响 。 


13.6.2 ”利用 纯 CSS 调整 色 块 尺 十 


上 一 小 节 中 介绍 了 一 种 利用 jQuery Mobile 分 栏 实现 Metro 界面 的 效果 ， 但 是 这 种 方法 有 着 
极 大 的 缺陷 ， 不 能 根据 需要 调整 色 块 的 高 度 。 本 小 节 将 展示 一 种 利用 CSS 实现 Metro 界面 的 方 
法 (参见 源 代码 chapter13\ 利 用 CSS 实现 Metro.html)。 


【示例 13-7】 利用 CSS 实现 Metro 
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运行 结果 如 图 13.15 所 示 。 


图 13.15 利用 CSS 实现 的 Metro 界面 
在 代码 的 第 25~29 行 ， 为 界面 中 的 色 块 设计 了 4 种 颜色 对 它们 加 以 区 分 。 在 第 29 行规 定 了 
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每 个 色 块 的 宽度 为 整个 屏幕 宽度 的 48%， 高 度 为 外 侧 容器 的 30%。 第 35~46 行 在 页 面 中 加 入 6 
个 色 块 ， 接 下 来 要 做 的 就 是 根据 需要 设置 色 块 的 高 度 ， 这 部 分 通过 JavaScript 来 实现 (代码 第 
11~21 行 )。 

在 第 13~15 行 的 代码 中 获得 了 页 面 可 用 部 分 的 高 度 〈 屏 幕 高 度 减 去 头 部 栏 和 尾部 栏 所 占 的 
部 分 )， 就 可 以 直接 将 这 个 高 度 设置 为 6 个 色 块 外 部 容器 的 高 度 了 ， 如 范例 第 20 行 所 示 。 根 据 
CSS 的 设置 ， 每 个 色 块 再 自动 占据 其 中 的 30%， 这 就 保证 了 屏幕 中 的 色 块 始终 不 会 超出 屏幕 的 
范围 ， 并 且 在 底部 留 有 一 定 的 空隙 。 


副 也 可 以 混合 使 用 分 栏 布局 和 JavaScript 来 达到 这 样 的 效果 。 
3.7 课程 表 


上 一 节 通 过 两 种 方法 实现 了 Metro 效果 的 界面 ， 相 信 读 者 们 一 定 有 偷偷 地 比较 它们 的 不 同 ， 
不 知道 有 没有 得 出 什么 惊天 动 地 的 结论 。 这 里 笔者 有 一 个 简单 的 结论 ， 就 是 分 栏 布局 在 仅 需要 限 
定 宽度 而 对 高 度 没有 特殊 要 求 的 情况 下 是 很 有 优势 的 。 本 节 将 发 挥 这 一 优势 实现 一 款 简 单 的 课程 
表 (参见 源 代码 chapter13\ 课 程 表 .html )。 


【示例 13-8】 课程 表 
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63 </div> 
64 </body> 
65 </html> 


运行 结果 如 图 13.16 所 示 。 


13.16 简洁 的 课程 表 


本 例 为 第 一 行 显示 星期 的 栏目 和 显示 课程 的 栏目 设置 了 不 同 颜色 的 主题 以 做 区 分 ， 其 他 地 方 
基本 上 就 按照 默认 的 样式 进行 。 通 过 图 13.16 可 以 看 出 ， 生 成 的 课程 表 非常 工整 并 且 非 常 接近 原 
生 界 面 。 


| 本 节 的 范例 没有 加 入 对 于 第 几 节 课 进行 描述 的 栏目 ， 因 为 一 周正 常情 况 有 5 天 是 要 上 课 的 ， 
但 是 在 jQuery Mobile 中 默认 最 多 只 能 分 成 5 栏 ， 笔 者 只 好 做 出 一 点 会 弃 。 这 也 是 jQuery 
| Mobile 分 栏 的 一 个 缺陷 所 在 。 


13.8 小 结 


本 章 重 点 介绍 了 jQuery Mobile 进行 布局 的 方法 ， 其 中 包括 分 栏 和 折 著 这 两 大 内 容 。 在 
学 习 的 过 程 中 ， 读 者 应 该 已 经 发 现 合理 的 布局 可 以 让 原本 就 设计 精美 的 jQuery Mobile 控件 
再 度 增 色 不 少 ， 这 也 很 好 地 证 明了 jQuery Mobile 中 布局 的 重要 性 。 如 果 说 在 jQuery Mobile 
中 控件 是 兵 ， 那 么 布局 就 是 指挥 这 些 士兵 的 将 军 ， 通 过 合理 的 规划 才能 将 一 盘 散 沙 的 士兵 集 
合 起 来 打仗 。 同 样 ， 也 只 有 合理 的 布局 才能 让 每 一 个 控件 在 各 自 的 位 置 上 各 司 其 职 ， 组 合成 
让 人 爱不释手 的 应 用 。 
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< 应 用 的 发 布 和 推广 > 


之 前 已 经 介绍 了 许多 利用 jQuery Mobile 进行 应 用 开发 的 方法 和 例子 ， 相 信 读 者 也 都 掌握 
了 。 但 是 仅仅 将 应 用 开发 出 来 还 是 不 行 的 ， 还 要 将 它们 推 向 市 场 。jQuery Mobile 开发 的 应 用 面 
向 用 户 的 方式 主要 有 两 种 ， 一 种 是 利用 PhoneGap 进行 打包 ， 然 后 发 布 到 相应 的 应 用 商店 ， 另 一 
种 是 直接 以 Web 的 形式 进行 发 布 。 两 种 方法 各 有 利弊 ， 需 要 慎重 选择 。 

除了 将 应 用 进行 打包 的 方法 外 ， 本 章 还 将 介绍 对 应 用 进行 宣传 以 及 推广 的 方法 。 本 章 主要 包 
括 以 下 内 容 : 

@ 将 HTML 页 面 打 包 成 多 平台 应 用 的 方法 

@ 通过 应 用 商店 发 布 应 用 的 好 处 与 坏处 

@ ”怎样 推广 自己 的 应 用 


生成 Android 应 用 


安 卓 (Android) 的 开发 环境 主要 包括 以 下 几 个 部 分 : 
(1) JDK 的 配置 ; 

(2) ADT 的 安装 ; 
(3) SDK 的 更 新 ; 

(4) 测试 安装 程序 。 

下 面 将 分 别 对 它们 进行 详细 介绍 。 


14.1.1 JDK 的 配置 


安 卓 的 开发 是 基于 Java 语言 的 ， 因 此 ， 在 对 安 卓 开 发 环境 进行 配置 之 前 ， 要 先 安装 好 Java 
所 需要 的 运行 环境 。 

首先 需要 下 载 Java 7。 打 开 Java 的 中 文 主页 http://www.Java.com/zh_CN/， 可 以 看 到 一 个 非 
常 醒目 的 红色 按钮 ， 上 面 有 “免费 Java 下 载 ” 几 个 字 ， 如 图 14.1 所 示 。 单 击 该 按钮 进入 下 载 页 
面 ， 如 图 14.2 所 示 。 
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葛 费 Ja 下 载 


> 什么 是 Java? 。 我 有 Java 中? 。 是 否 雪 要 才 助 9_ 
所 有 Java 下 载 


关于 Java 《英语 站 点 》 


夸 a pee . 
一 
各 Javaone- &) Wice . 


国王 
2 
Greenfoot Bluej | 


Ace Ja + Greenfoot Jam Bluej Gacle Acadeny JavaMagazine 


Java Developer 
Conference 


ORACLE 


图 14.1 Java 中 文 主页 


下 载 适 用 于 Windows 的 Java 
推荐 vorsion 7 Update 25 (文件 大 小 : 992 KB) 


同意 并 开始 葛 费 下 载 


下 载 Java 即 支 朋 您 确认 阅读 过 并 接受 量 放 转 户 诈 可 协 这 的 条 区 


加 “332 和 RA， 放 柯 贡 才 要 重新 启示 浏览 轩 《 关 问 所 有 济 振 军 口 并 重新 条 开 】 才 能 启用 
Jam 克 区 


> 安 六 8 
五 近 要 于 


14.2 Java 的 下 载 


单 击 屏幕 中 央 的 “同意 并 开始 免费 下 载 ”按钮 ， 即 可 下 载 Java 的 在 线 安装 包 。 相 对 于 这 种 

在 线 安装 的 方式 ， 很 多 人 更 习惯 于 下 载 离线 安装 包 。 单 击 左 侧 的 “ 脱 机 安装 程序 ”链接 ， 可 以 看 

到 一 个 类 似 于 如 图 14.2 所 示 的 页 面 ， 单 击 “ 同 意 并 开始 免费 下 载 ”按钮 直接 下载。 下载 完成 后 

双击 即 可 安装 ， 运 行 后 出 现 如 图 14.3 所 示 的 画面 ， 稍 微 等 待 一 下 ， 进 入 如 图 14.4 所 示 的 界面 。 
- 直 单 击 “ 下 一 步 ”按钮 就 会 完成 安装 ， 完 成 效果 如 图 14.5 所 示 。 


Java(TM) SE Development Kit 7 Update 1 0 


回 | Windows 正在 配置 Java (TN) SE Development Kit 7 Update 1 
i 


1 EE | 


= 


图 14.3 ”安装 程序 运行 之 后 要 稍微 等 待 一 下 
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萌 JavaTM) SE Development Kit 7 Update 1 - 设 重 器 | 《| 湖 Java(TM) SE Development kit7 Update 1 -完成 器 | 


ORACLE 
欢迎 使 用 Java(TM) SE Development Kt 7 Update 1 安装 向 导 a a 
睦 向 导 痢 引导 您 完 成 Java SE DevelopmentKt 7Update 1 的 安 半 过 程 。 ee 
有关 Orade 开 皮 者 产品 、 甬 务 和 汪 吕 的 优惠 
要 


| 当 直 单 圳 守成 -后 村 必 信 产品 与 系统 信息 ， 同 时 显示 JOkK 产品 主 骨 未 单 。 如 果 你 

兰 计生 人 
有 有 关注 国信 的 吉 氢 以 及 这 些 孝 提 的 管理 和 使 用 方式 的 更 多 信息 ,请 参见 产品 
的 


[| 
图 144 短暂 的 等 待 之 后 进入 安装 界面 图 14.5 安装 完成 


在 JDK 安装 完成 之 后 暂时 还 无 法 使 用 ， 因 为 还 需要 配置 环境 变量 ， 以 下 是 在 Windows 中 配 
置 JDK 环境 变量 的 方法 。 


(1) 鼠标 右键 单 击 “ 我 的 电脑 ”( 如 果 是 Windows 7 系统 ， 鼠 标 右键 单 击 “ 计 算 机 >)， 在 
快捷 菜单 中 选择 “属性 ”命令 。 在 “属性 ”对 话 框 中 选中 “高 级 ”选项 卡 ， 如 图 14.6 所 示 。 单 
击 “环境 变量 ”按钮 ， 在 新 打开 的 “环境 变量 ”对 话 框 中 对 系统 变量 进行 编辑 。 

Er LE 


[HR 名 硬件 _] 高 名 。 | 系统 保护 | 运程 | 
要 进行 大 多 数 更 汐 ， 您 必须 作为 管理 员 登 录 


ES 
用 户 配置 文件 
与 人 滞 录 有 关 的 贞 面 设置 

[Ez] 
bn 吉隆 忆 和 


| 

| 

视觉 效果 ， 趟 理 器 计 则 ， 内 存 使 用 ， 以 及 虚拟 内 存 
it 

系统 户 动 、 系 流 拓 败 和 网 式 信息 


图 14.6 “高 级 ”选项 卡 


(2) 新 建 一 个 变量 JAVA_HOME， 将 它 的 内 容 设置 为 IDK 的 安装 目录 ， 如 笔者 将 Java 安 
装 在 路 径 Ci\Program FilesJavajdk1.7.0 01 下 ， 则 将 该 变量 设 为 Ci\Program 
Files\Javaydk1.7.0_01。 


草 直 | 许多 人 会 在 这 一 步 配置 IDK 出 错 ， 可 以 用 以 下 方法 避免 | 


安装 时 选择 默认 配置 ， 然 后 在 C 盘 Program Files 文件 夹 下 找 一 个 名 为 Java 的 文件 夹 ， 打 
后 可 以 看 到 jre7 和 jdkXXX 两 个 文件 夹 ， 其 中 XXX 处 的 内 容 会 根据 安装 JDK 版 本 的 不 同 而 有 
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所 区 别 ， 打 开 jdkXXX 文件 夹 ， 随 便 找 一 个 文件 并 单 击 鼠 标 右键 ， 选 择 “ 属 性 ”菜单 ， 打 开 “ 属 
性 ”对 话 框 ， 其 中 的 “位 置 ” 后 面 的 值 便 是 该 处 所 要 填 的 值 ， 如 图 14.7 中 所 标示 的 位 置 。 
荣 规 “| 安全 | 详细 信息 [以 前 的 版 本 | 
&@ README 
文件 类 型 :Firefox ITWL Docanent ( html) 
Tirefox 0... | 
A 
2013 年 9 月 3 日 ，22:47:57 
2013 年 9 月 3 日 ，22:47:57 
2013 年 9 月 3 日 ，22:47:57 
R 访 o) 四 区 基 00 [十 &Oa 
14.7 环境 变量 路 径 的 选取 
(3) 继续 设置 第 2 个 环境 变量 CLASSPATH， 其 中 内 容 设置 为 : 
.7%IJAVA HOMES\1ib\tools.jar;%JAVA HOMES%\1ib\dt.jar;®%JAVA HOMES\bin; 
开头 的 “.;” 与 结尾 的 “;” 一 定 不 要 省 略 。 
(4) 在 环境 变量 中 找到 名 为 “path” 的 变量 ， 在 它 后 面 加 入 一 句 : 
%JAVA HOMES\bin; 
注意 ， 这 里 要 先 看 path 原 有 内 容 结 尾 是 否 有 “;”， 如 果 没 有 则 需要 将 加 入 的 内 容 改 为 : 
7 $AVA HOMES\bin; 
在 path 中 原本 就 有 一 些 内 容 ， 新 手 第 一 次 配置 的 时 候 特别 容易 由 于 疏忽 将 这 部 分 内 容 误 
| 删 ， 因 此 笔者 特别 提醒 ， 要 将 上 面 的 内 容 加 在 原 内 容 后 面 而 不 是 “替换 ”。 另 外 对 于 已 经 误 
| 删 了 这 部 分 内 容 的 读者 ， 可 以 自行 百度 path 变量 中 的 默认 变量 ， 再 添加 回去 ， 也 算是 一 种 
补救 措施 。 
(5) 单 击 “确定 ”按钮 保存 修改 。 
(6) 单 击 “ 开 始 ”| “运行 ”菜单 ， 在 打开 的 对 话 框 内 输入 CMD， 打 开 DOS 窗口 来 测试 
JDK 配 置 是 否 完成 。 


在 DOS 窗口 中 输入 java -version， 结 果 如 图 14.8 所 示 。 再 输入 javac， 运 行 结果 如 图 14.9 所 示 。 


图 14.8 测试 Java 版 本 号 
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图 14.9 javac 效果 


至 此 ， 就 可 以 判断 JDK 已 经 配置 成 功 了 。 


元 虽然 有 人 说 如 果 只 进行 安 卓 开发 可 以 不 对 JDK 进行 配置 ， 笔 者 试验 了 一 下 在 某 些 集成 开发 | 
环境 下 确实 是 可 行 的 ， 但 还 是 希望 读者 不 要 偷懒 ， 支 持 一 下 原生 的 开发 环境 ， 而 且 笔者 觉得 
| 原生 开发 环境 要 比 集成 开发 环境 快 一 些 ， ) 


14.1.2 ”Eclipse 与 ADT 的 配置 


早 些 时 候 ， 需 要 先 安装 ADT 再 将 它们 加 载 到 Eclipse 中 ， 现 在 Google 已 经 将 它们 集成 在 一 
起 了 ， 可 以 让 开发 者 方便 地 使 用 。 


包含 了 大 量 开 发 者 需要 的 信息 。 


A Sweeter Jelly Bean! 


14.10 ”Google 开发 者 首页 


可 以 清楚 地 看 到 页 面 下 方 有 5 个 果冻 豆 风 格 的 按钮 ， 单 击 第 2 个 按钮 (名字 是 “Get the 
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SDK”) 就 可 以 下 载 Google 为 开发 者 准备 的 集成 开发 环境 。 

之 后 会 进入 Google 为 开发 者 准备 的 服务 条 款 ， 勾 选 “I have read and agree with the above 
terms and conditions” 复 选 框 ， 然 后 根据 自己 的 需要 选择 使 用 64 位 还 是 32 位 的 开发 包 ， 然 后 点 
击 “Download the SDK ADT Bundle for windows” 和 链接 就 可 以 进行 下 载 了 ， 如 图 14.11 所 示 。 


DM Developers Design Distibute 
Training 。 APl euides Reference Google Services 
Developer Tools Get the Android SDK 


With a ungle download the ADT Bundie includes 
even need to begin developing apps 


Download the SDK 
ADT Bundie for Windows 


14.11 SDK 下 载 页 面 


必 元 | 这 个 文件 有 442M， 确 实 是 大 了 点 ， 不 过 在 下 载 完成 之 后 笔者 认为 这 绝对 是 值得 的 。 因 为 这 
| 里 面 不 仅 打 包 了 最 新 的 ADT， 而 且 还 将 它 集成 在 Google 为 安 卓 开 发 者 定制 的 Eclipse 中 ， 
| 实际 上 大 大 节省 了 开发 者 的 时 间 ， 在 此 感谢 伟大 的 Google。 


下 载 完 成 后 将 文件 解压 ， 其 中 有 一 个 文件 夹 名 为 eclipse， 打 开 该 文件 夹 ， 运 行 其 中 的 
eclipse.exe。 如 果 运行 成 功 ， 就 说 明 已 经 成 功 安装 好 了 ADT 和 Eclipse， 如 图 14.12 所 示 。 


ANDROID 


DEVELOPER 
TOOLS 


图 14.12 ”Google 为 Eclipse 修改 的 启动 界面 


14.1.3 ”SDK 的 更 新 
完成 ADT 的 更 新 就 可 以 开始 对 SDK 进行 更 新 了 ， 单 击 Eclipse 工具 栏 中 的 Window|Android 
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SDK Manger 菜单 ， 如 图 14.13 所 示 。 打 开 如 图 14.14 所 示 的 界面 ， 耐 心 稍 等 一 会 ， 等 待 它 自 动 
获取 能 够 更 新 的 资源 。 


Android SDK Marager 村 [eey > 
[Wirdow| Help Packages Tools 
New Window SDK Poth: Exvedt-bundic -windows 285-2013071N\sdk 
New Editor Packages 
Hide Toolbar 嘱 Name Apl Rer Status 
_ a 
Open Perspective » Ef Mndroid SDK Toos 2204 区 Instaled 
Show View » Ef Mndroid SDK Platiorm-tools 1 BInealed 
Bf Mndroid SDK Build-tools 7 本 Insaled 
Customize Perspective... 4 I Android 422 (AP117) 
ee eres Re 丰硕 SDK platform 二 2 本 Inaaled 
3 百 画 ARM EABI v7a System image 2 Ingaled 
Reset Perspective... 了 HE bors 
Close Perspective 百 画 Andreia Support Libray 一 导 mealed 
Close All Perspectives 
Navigation » 
"加 
Android SDISManager Show 加 Updates/New instaled Obsolete Select New or Updatas 
园 Android Virtual Device Manager Sertby aptlerel OReposiony Desclect al Delete 
回 Run Android Lint 上 J 
| Fetching htpey/di-esl.google.com/andreid/repecitory/addone lict-2xml Ea 
14.13 Windows 菜单 图 14.14 正在 更 新 所 需要 的 数据 


读者 也 许 会 遇 到 更 新 了 很 久 也 无 法 更 新 的 现象 ， 这 是 由 于 Google 的 一 部 分 服务 器 在 我 国 无 
【 法 进行 访问 ， 对 于 这 种 情况 的 解决 方法 ， 笔 者 将 在 后 面 给 出 方案 。 


下 面 通过 截图 来 向 读者 演示 正常 的 更 新 方法 。 
(1) 在 对 话 框 中 选中 要 更 新 的 内 容 ， 如 图 14.15 所 示 。 


局 Tools 
加 Android SDK Tools 22.04 芭 Installed 
太 Android SDK Platform-tools 17 蕊 Installed 
回 Android SDK Build-tools 17 本 Installed 
[C3 Android 422 (API 17) 


电 SDK platform 17 2 展 Installed 
ARM EABI v7a System Image 17 2 区 Installed 


ras 


夯 Android Support Library 13 司 Installed 


14.15 ”选择 需要 更 新 的 内 容 


性 却 如 果 时 间 足 够 的 话 ， 还 是 尽 可 能 将 所 有 版 本 都 更 新 了 吧 。 | 


(2) 笔者 建议 Tools 和 Exteras 必须 全 部 安装 ， 至 于 版 本 ， 建 议 只 安装 一 个 4.2.2 和 一 个 2.2 
就 可 以 了 ，4.2.2 是 目前 的 稳定 版 本 ， 而 2.2 则 是 目前 公认 的 使 用 AVD 〈 安 卓 模 拟 器 ) 最 流畅 的 
版 本 。 
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14.1.4 ”第 一 个 程序 


在 完成 了 安 卓 开发 环境 的 搭建 之 后 ， 开 始 动手 制作 一 个 程序 ， 来 验证 开发 环境 是 否 真 正 搭建 
完成 了 。 


(1) 打开 Eclipse， 单 击 File[INew|Android Application Project 菜单 新 建 一 个 工程 ， 在 弹出 的 
对 话 框 中 按照 如 图 14.16 所 示 的 样式 填写 。 


Oa ane 一 
New Ardrord Application | 
® The appicagon reme for mest sppa begire with sn vppercsse lemer 


| 
TT 
Comp Wadeo AN 1hs Menkeid 42 Wety tom "| 
home Lio Lala mah Derk Mben Ber 
OTe oppieeden rame i homn in we Ray Sore, os wot rin te Manoge Appiewion atin 
| Songe 
| 
| 


14.16 新建 一 项 工程 


(2) 这 里 新 建 了 一 项 名 为 “android test” 的 工程 ， 当 在 Application Name 一 栏 中 填 入 工程 
名 后 ，Project Name 与 Package Name 两 栏 会 由 Eclipse 自动 填充 。 下 面 的 几 个 选择 列表 是 用 来 选 
择 生 成 工程 版 本 的 ， 可 以 先 不 用 管 它 ， 然 后 单 击 Next 按钮 。 

(3) 之 后 又 会 弹出 几 个 类 似 的 对 话 框 ， 可 以 暂时 不 理会 其 中 的 内 容 ， 全 部 单 击 Next 按钮 跳 
过 ， 直 到 来 到 最 终 对 话 框 ， 单 击 Finish 按钮 完成 ， 如 图 14.17 所 示 。 


we- mara orienen mi 了 
ev 

te Se se ee etere roramere tomer see Hbter 
poe 

re Nene Mara 

pd ee 

Mig Te poe 
@ ”wy EE 


14.17 项 目 创建 完成 
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(4) 此 时 就 可 以 看 到 Eclipse 左 侧 出 现 了 刚刚 创建 的 项 目 ， 如 图 14.18 所 示 。 
(5) Eclipse 已 经 默认 为 开发 者 完成 了 一 个 简单 的 “hello world” 程 序 ， 可 以 直接 编译 运 
行 ， 但 是 在 运行 之 前 ， 还 需要 在 本 机 创建 一 个 安 卓 虚拟 机 。 
(6) 执行 Window|Android Virtual Devices Manager 菜单 打开 安 卓 虚拟 机 控制 对 话 框 ， 单 击 New 
按钮 新 建 一 个 虚拟 机 ， 各 项 参数 可 按照 如 图 14.19 所 示 填 写 。 完 成 后 单 击 OK 按钮 即 可 完成 创建 。 
Package Explore 区 日 多 ”= 0 | 


“本 = | some ta 
Device: 32" HVGA sider (ADP1) (320 x 480: mdpd ~ 
Taroer fandroid 422. -Apl Level 17 
cpupet 
Koybeart 
Sum 
& drawable-hdpi Se 
BB drawable-ldpi Back Camers [Nene 
BS drawable-mdpi 
BS drawable-xhdpi Memery Opticrs: 
BS drawable-othdpi 4 ED 四 
4 B laycut 
Bl adiviy_mainsml internal Sorage: jo0 
3 品 
mon [9 
BS values sD cad 
BS values-sw600dp si [rr 
BS values-sw720dp-land 
BS values-vll me i 
BS values-v14 
3) AndroidManifestxml Emmaion Options: Ejsnepshot use Hos GPU 
ng 
国 progusrd-projecttd o ng AvD 
力 projectproperties 
图 一 个 虚 
14.18 ”刚刚 新 建 的 工程 图 14.19 新 建 一 个 虚拟 机 


(7) 现在 鼠标 右键 单 击 创建 好 的 工程 ， 在 快捷 菜单 选择 Run AS|Android Application 命令 即 
可 运行 工程 ， 结 果 如 图 14.20 所 示 。 


图 14.20 程序 总 算 运 行 起 来 了 


副 第 一 次 运行 虚拟 机 时 需要 加 载 一 段 比较 长 的 时 间 ， 一 定 要 耐心 等 待 。 | 
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14.1.5 ”使 用 实体 机 测试 第 一 个 程序 
虽然 在 创建 虚拟 机 的 时 候 可 以 设置 不 同 的 参数 模拟 出 不 同型 号 的 设备 ， 但 是 笔者 建议 各 位 无 
第 一 是 真 机 要 比 虚拟 机 运行 流畅 得 多 ， 而 且 使 用 感受 也 更 真实 ， 第 二 是 虚拟 机 的 加 载 速度 实在 
是 太 慢 了 。 当 然 还 有 更 快捷 的 手段 ， 就 是 本 书 介绍 的 jQuery Mobile 或 其 他 的 一 些 利用 HTML 5 进行 


开发 的 开源 框架 。 
下 面 就 来 介绍 使 用 实体 机 进行 测试 的 方法 。 


(1) 读者 可 以 去 网 上 下 载 一 个 “天 豆 莱 ”。 


二 其 实 不 只 是 玻 豆 英 ， 像 91 手机 助手 、360 手机 助手 这 样 的 安 卓 手机 管理 软件 都 是 可 以 的 ， 
| 然后 用 USB 连接 手机 ， 自 动 安装 驱动 


(2) 第 一 次 用 USB 连接 手机 和 电脑 时 ， 会 提示 需要 勾 选 设置 开发 者 选项 的 USB 调 
试 。 那 些 手机 管理 软件 也 会 根据 自动 识别 出 的 手机 型 号 给 出 具体 的 操作 方法 ， 因 此 这 里 仅 
是 提醒 读者 不 要 忘记 。 连 接 成 功 后 鼠标 右键 单 击 Eclipse 中 的 工程 名 ， 在 快捷 菜单 中 选择 
Run ASIRun Configurations 命令 ， 按 照 如 图 14.21 所 示 的 内 容 进行 选择 ， 然 后 单 击 Run 按钮 
即 可 运行 。 


@ Run Configurations LE 
Greate manage and run configurations 
Android Application 
EU EE Name: androud.test 
[ope i mer 
4 国 Anbol Apphonton DeployTERETISS SEE Mode 习 
站 NS © Always prompt to pick device 
机 着 i R 
ei © Launch on all compatible devices/AVDs 
Jo AP Active devices 
回 Java Application "| Oo Me ep de Aways uses preferred AVD if set below launches on compatible device/AVD othe S| 
J JUnit let a preferred Android Virtial Device for deployment 
Launch 6 
和 AVD Name Target Name Platform ApI Level CPU/ABI oD| 
test Android 422 422 17 AM (armesbiw7a] | 让 
[rn 
| Ma 
al Cm | ; 
Fher matehed 8 of 10 Kems [Eppy | [Rewer 
@ Run Close 


14.21 设置 编译 完成 后 在 设备 上 运行 
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(3) 继续 鼠标 右键 单 击 工程 名 ， 在 快捷 菜单 中 选择 Run AS|Android Application 命令 会 发 现 
几乎 不 用 怎么 等 待 ， 编 译 好 的 apk 就 被 安装 到 设备 中 了 ， 这 时 就 可 以 利用 吏 豆 莱 进 行 截图 。 

通过 观察 图 14.22 读者 可 以 发 现 笔者 用 来 测试 的 设备 是 老 掉 牙 的 defy， 显 得 一 点 也 不 专业 。 


图 14.22” 吏 豆 莱 上 的 截图 


| 由 于 长 期 将 设备 连接 在 电脑 上 ， 会 对 电池 造成 比较 大 的 耗损 ， 因 此 笔者 认为 在 对 程序 进行 测 
| 试 和 调试 的 时 候 ， 还 是 尽量 用 一 些 旧 手机 (尽量 是 那些 碰 都 不 想 碰 的 ) ， 仅 在 需要 测试 兼容 
| 性 以 及 某 设备 特性 时 ， 再 去 使 用 那些 比较 昂贵 的 旗舰 机 ， 这 也 是 节约 成 本 的 一 种 方法 。 

使 用 纹 豆 苹 这 类 软件 的 好 处 是 : 


@ ”开发 者 在 开发 时 需要 将 进度 用 文档 记录 下 来 ， 而 已 完成 部 分 的 截图 是 其 中 一 个 重要 的 
组 成 部 分 。 


@ ”在 开发 中 常常 需要 将 一 些 内 容 加 入 SD 卡 中 ， 使 用 这 些 管理 工具 非常 方便 。 


如 何 生 成 跨 平台 的 应 用 


jQuery Mobile 一 个 非常 了 


EE 要 的 特点 就 是 它 的 跨 平台 特性 ， 虽 然 笔 者 是 以 安 卓 来 举例 ， 但 这 
并 不 代表 不 需要 管 其 他 平台 ， 在 安 卓 平台 上 测试 成 功 之 后 对 其 他 平台 的 移植 也 是 非常 重要 的 。 


14.2.1 


生成 iOS 应 用 
想 要 4 


E 成 iOS 应 用 ， 首 先 要 配备 一 部 能 够 搭载 iOS 系统 的 设备 ， 如 iPhone、iPad， 这 样 才能 
测试 生成 的 应 用 。 
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| 如 果 是 个 人 开发 者 ， 没 有 它们 影响 也 不 是 很 大 ， 毕 竞 不 管 是 PhoneGap 还 是 jQuery Mobile， 
最 看 重 的 还 是 iOS， 在 这 方面 做 的 测试 和 优化 也 最 完备 ， 只 要 在 安 卓 设备 上 成 功 了 ， 可 以 省 
略 对 iOS 的 测试 。 


(1) 首先 要 在 苹果 的 开发 者 门户 下 载 Xcode 并 安装 ， 这 里 以 5.0 版 本 为 例 ， 如 图 14.23 所 示 。 


ios7 
Develop your apps foriOS 7today 
Leam more | ID3 Dey Center 


OS X Mavericks 
六 semane aesrwsonarosx oe 
Loom me Me be center 


Xcode5 


See whats new inversion 5.0. 
Leam more | Downioad, 


图 1423 Xcode 下 载 


民 却 在 下 载 Xcode 时 要 注册 苹果 的 开发 者 账号 | 


(2) 打开 之 前 下 载 的 PhoneGap 包 ， 找 到 其 中 适用 于 iOS 的 文件 (lib 目录 下 的 ios 目 
录 ， 如 图 14.24 所 示 )。 将 该 文件 夹 复 制 到 一 个 比较 容易 找到 的 地 方 ， 并 且 保 证 路 径 名 中 不 包 
含 中 文 。 


包 会 到 库 中 共享” 刻录。 新建 文件 交 
全称 2 修改 日期 类 型 


上 android 
Bi blackberry 


B windows-phone-7 
B windows-phone-8 


图 14.24 ”PhoneGap 适用 于 iOS 的 文件 目录 


(3) 启动 Xcode， 单 击 “ 文 件 ”|“ 新 建 项 目 ” 菜 单 ， 在 新 建 项 目的 导航 中 找到 项 目 “User 
Templates”， 选择 “PhoneGap-based Application” 选 项 。 然 后 继续 选择 刚刚 找到 的 那个 目录 ， 并 
为 项 目 命名 ， 如 图 14.25 所 示 。 
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图 14.25 生成 新 项 目 
(4) 接 下 来 可 以 找到 项 目 中 的 www 目录 ， 并 随意 找到 一 个 之 前 写 好 的 页 面 放 到 其 中 。 


二 一 定 不 要 忘记 将 文件 名 改 为 index.html。 


(5) 打开 项 目 中 的 文件 test-info.plist( 这 里 的 test 是 笔者 的 项 目 名 称 ， 读 者 可 以 根据 自己 的 
习惯 随意 命名 )， 将 BundleIdentifier 改 为 苹果 公司 提供 的 标识 ， 也 可 以 在 线 注册 苹果 的 许可 ， 获 
取 许 可 的 网 址 如 下 : 


二 获取 许可 的 前 提 是 要 有 苹果 的 开发 许可 ， 如 果 只 是 学 习 可 以 跳 过 这 一 步 又， 但 如 果 是 为 了 盈 | 


利 还 是 花 点 时 间 注册 一 下 吧 。 如 图 1426 所 示 为 注册 界面 。 


锋 Developer 


NU 14.26 WDB 


(6) 确认 将 左上 角 的 Active SDK 选项 从 Use Base SDK 改 为 Device+version#， 然 后 就 可 以 
运行 程序 了 。 当 然 没有 设备 的 读者 也 可 以 使 用 模拟 器 来 测试 应 用 。 
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有 虽然 安装 Xcode 要 求 必须 在 MAC 平台 下 运行 ， 但 是 只 要 有 一 台 Intel 平台 的 PC， 只 要 配置 
【 不 是 太 差 ， 还 是 可 以 装 上 MAC 系统 的 。 


其 实在 国内 ， 只 要 做 好 了 安 卓 和 苹果 两 个 平台 ， 其 他 平台 基本 都 能 用 了 。 


14.2.2 生成 WebOS 应 用 


WebOS《〈 如 图 14.27 所 示 ) 是 一 个 基于 浏览 器 的 网 络 操作 系统 ， 但 是 这 并 不 意味 着 可 以 不 经 
过 封装 直接 使 用 HTML 文件 ， 因 此 还 是 需要 PhoneGap 来 插 上 一 脚 。 


图 14.27 WebOS 


在 封装 之 前 依然 是 要 准备 好 WebOS 的 开发 环境 ， 如 图 14.28 所 示 ， 依 然 很 麻烦 ， 不 过 好 在 
不 再 需要 配置 环境 变量 。 


中 
E 


下 载 并 安装 cygwin ( 仅 Windows) 确保 你 选择 了 "make"， 默 认 情 况 下 不 包 
括 此 选项 


出 下 载 最 新 的 PhoneGap 解 压 其 中 的 文件 
图 14.28 生成 WebOS 应 用 所 要 做 的 准备 
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各 在 Windows 8 下 安装 VisualBox 可 能 会 由 于 权限 问题 导致 安装 失败 ， 因 此 一 定 要 记得 选择 
| “以 最 高 权限 运行 ”。 


完成 这 些 之 后 就 可 以 到 PhoneGap 中 找到 用 来 生成 WebOS 应 用 的 目录 了 ， 如 图 14.29 所 
示 。 打 开 terminal/cygwin 进入 WebOS 目录 ， 对 index.html 进行 修改 。 


名 称 修改 日 期 关于 大 小 


旧 cordova-cll 
Bios 

Bosx 

点 windows8 
B windows-phone-7 

点 windows-phone-8 文 忻 夹 


图 14.29 生成 WebOS 应 用 所 需 的 文件 


之 后 ， 通 过 folder/start 菜单 启动 Palm 模拟 器 ， 然 后 输入 make 命令 将 应 用 打包 到 模拟 器 
中 ， 就 可 以 开始 对 应 用 的 测试 了 。 


蕊 在 实体 机 中 测试 的 方法 就 是 用 USB 连接 到 设备 ， 然 后 输入 make 命令 就 可 以 了 。 | 


1 4 .了 怎样 发 布 应 用 


在 开发 一 款 应 用 的 时 候 ， 首 先 要 明确 这 款 应 用 的 需求 对 象 是 哪些 人 群 ， 然 后 根据 这 些 人 群 来 
明确 发 布 应 用 的 方式 。 而 在 跨 平台 开发 时 代 ， 要 明确 的 一 点 是 这 款 应 用 是 打包 成 安装 程序 的 本 地 
应 用 ， 还 是 直接 在 Web 上 运行 的 网 页 ， 甚 至 是 两 者 兼备 的 应 用 。 

举 一 个 例子 ， 背 单词 这 样 的 应 用 就 可 以 打包 成 APP， 而 商场 导购 软件 就 只 能 做 成 Web 的 形 
式 ， 因 为 作为 该 项 目的 买主 ， 商 场 希望 能 够 以 二 维 码 的 形式 将 它 放 在 商场 的 展板 上 让 每 一 个 用 户 
都 去 使 用 。 这 时 如 果 强 求 每 个 用 户 都 去 下 载 它 是 非常 不 现实 的 ， 而 以 Web 的 形式 就 会 吸引 更 多 
的 顾客 。 

如 果 确认 了 应 用 以 APP 的 形式 进行 发 布 ， 那 么 就 可 以 选择 一 个 应 用 商店 进行 上 传 了 ， 当 然 
也 可 以 同时 上 传 多 个 应 用 商店 。 现 在 的 应 用 商店 有 很 多 ， 如 中 国 移动 MM 商城 (图 14.30)、 联 
想 “ 乐 ”商店 (图 14.31)、 华 为 应 用 市 场 ( 图 14.32) 等 。 一 般 来 说 ， 将 应 用 上 传 到 这 些 大 型 的 
应 用 商店 本 身 就 能 够 受到 免费 的 推广 ， 对 于 个 人 开发 者 或 者 小 团队 来 说 会 比较 方便 。 但 是 要 注意 
上 传 到 这 些 商 店 的 应 用 是 要 进行 审核 的 。 
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全 
以 身 度 世界 妆 性 焉 “以 身 度 志 界 女性 织 
色调 { 身 吧 及 《 身 


他 上 味 之 后 ，《 生 时 他 罗 几 全 卫生 
讼 》 又 提出 下 示 。 于。 作 交 及 小 生性 一 个 呈 


ES 


3 
TEST 
不 《 干 基 》 赃 《 表 春 网 》 


型 儿 本 开 沦 多 用 身 枉 。90 后 的 而 中 全 ， 一 
批语 网 瑶 ， 吕 而 郴 市 ”本 正牌 既 历 葛 霄 期 


+ 
更 漫 相机 V 电 影 
星 级 : 并 全 星 级: 食 
当下 最 类 爆 洲 用 影 ,今天 你 看 了 吗 


91 桌 面 -壁纸 一 


图 14.31 联想 “ 乐 ” 商店 
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植物 大 战乱 已 一 去 那儿 旅行 -… 美 山 -大 楷 妈 … 淘宝 节奏 大 师 

人 NE 出 和 所 合生 活 倒 星 知 人 NR 
We 《理财 一 只 于 新 闻 财 一 哇 味 味 

Fa AH。 mta 寺 aant 


图 14.32 华为 应 用 市 场 


还 有 一 类 应 用 ， 如 大 名 易 易 的 QVOD， 它 在 苹果 应 用 商店 上 架 6 天 就 被 查封 ， 但 是 却 仍然 
在 各 大 论坛 被 私下 疯 传 。 这 就 说 明了 一 部 分 有 特殊 功能 的 应 用 是 不 适合 通过 应 用 商店 进行 推广 
的 ， 这 类 应 用 有 一 个 特点 ， 就 是 能 够 满足 一 部 分 用 户 的 迫切 需求 。 

比如 读者 设计 了 一 个 XX 考试 题库 之 类 的 应 用 ， 这 个 重 术 他 名 是 对 ， 那么 就 暂时 假设 是 XX 
大 学 XX 课 期 末 考 试 答案 大 全 。 如 果 上 传 到 应 用 商店 一 定 会 被 查封 或 遭 到 所 涉及 学 校 的 强烈 训 
责 ， 那 么 它 就 不 适合 在 应 用 商店 进行 推广 ， 而 应 该 以 Web 的 形式 利用 论 伦 坛 进行 推广 。 


1 4 .4 息 样 推广 应 用 


一 般 来 说 ， 上 传 到 应 用 商店 的 APP 不 需要 费力 做 太 多 的 推广 ， 因 为 应 用 商店 会 对 一 些 优秀 
的 应 用 进行 免费 的 推广 和 宣传 。 因 此 笔者 就 针对 那些 Web 应 用 的 推广 做 一 个 总 结 。 

首先 是 一 定 要 明确 针对 的 用 户 属于 哪些 人 群 有 哪些 需求 ， 而 不 要 到 处 发 广告 。 可 以 适当 地 做 
出 一 些 喷头 但 不 要 太 过 分 。 如 视频 播放 器 APP， 完 全 可 以 加 入 某 部 当前 新 上 映 的 电影 ， 然 后 宣 
传 使 用 该 应 用 即 可 免费 观看 该 电影 。 

但 是 一 定 不 要 骗 人 ， 如 《 寻 龙 诀 》 这 部 电影 刚 上 映 的 时 候 ， 许 多 网 站 就 用 “ 枪 版 ”的 片 源 来 
欺骗 用 户 说 是 高 清 版 本 ， 给 人 留 下 了 非常 不 好 的 印象 。 

另外 在 推广 时 要 充分 利用 好 百度 知道 这 一 平台 ， 如 背 单词 应 用 ， 可 以 在 有 人 通过 百度 知道 求 
6 级 单词 词 库 的 时 候 趁机 打出 广告 ， 就 能 起 到 不 错 的 效果 。 


| Web 类 应 用 如 果 想 要 做 大 就 一 定 要 与 PC 端的 Web 相 结合 ， 再 配 上 合理 的 SEO 和 充实 的 内 
| 容 。 也 许 投机 取 巧 能 够 一 时 获得 不 错 的 收益 ， 但 想 真正 做 大 做 强 还 需要 用 汗水 来 说 话 。 
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14.5 小 


本 章 的 核心 是 发 布 应 用 和 推广 应 用 ， 这 两 大 知识 点 实际 上 可 能 几 十 本 书 也 说 不 完 ， 因 此 笔者 
仅 能 分 享 一 点 自己 的 心得 体会 。 最 后 ， 笔 者 祝愿 每 一 位 读者 都 能 从 本 书 中 学 到 一 些 东 西 ， 并 能 靠 
这 些 知识 来 提高 自己 的 生活 水 平 ， 达 到 技术 为 我 所 用 的 目的 。 
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第 15 章 
< 法 例 : 实现 一 个 实时 股票 APP > 


在 一 些 相对 专业 性 很 强 的 互联 网 技术 开发 中 ，Web 图 形 和 图 表 是 一 种 很 好 的 数据 展现 形 
式 。 根 据 经 验 ， 在 有 大 量 统计 数据 的 情况 下， 传统 表格 数据 的 表现 形式 往往 会 让 用 户 处 于 没有 头 
绪 无 法 获取 所 需 信息 的 困难 之 中 。 而 以 图 表 方 式 提供 的 数据 表现 形式 ， 就 可 以 达到 简单 易 懂 、 

目 了 然 的 良好 效果 。 因 此 ， 利 用 好 Web 图 形 和 图 表 ， 是 开发 高 性 能 Web 应 用 的 必 备 手段 之 一 。 
实际 上 ， 借 助 图 形 和 图 表 来 统计 数据 是 一 项 具有 悠久 历史 的 统计 技术 。 在 早期 桌面 应 用 程序 
的 开发 中 ， 如 为 广大 用 户 所 熟知 的 微软 公司 Office 系列 办 公 套 件 ， rab shaven 
了 完美 的 产品 实现 。 但 随 着 互联 网 技术 的 大 行 其 道 ， 传 统 桌 面 应 用 早已 经 无 法 满足 用 户 的 需 
， 因 此 许多 互联 网 研发 公司 陆续 推出 了 基于 Web 的 图 形 和 图 表 产品 ， Eee 了 良好 
ee 与 用 户 体检 ， 并 在 不 断 进化 完善 中 。 例 如 ， 著 名 的 Alexa.com 网 站 就 应 用 了 大 量 的 图 形 与 
图 表 来 统计 互联 网 各 类 海量 数据 ， 如 图 15.1 所 示 。 


= |® lc) 
Googlecom Site Info x I i 
€ x Www.alexa.com/siteinfc/google cor 4 ”三 
| 国 ] 此 网 为 | 到 六 -| 网 ,是否 需要 大 尝 7 | 釉 译 | | 否 | | 一 委 不 册 译 天 广 | 选 硕 -| > 
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吧 United States 305% 


于 nda 91% 


RE Cn re a 
‘Ag Bu 二 
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More 


Where do google.com's visitors come ee 


eb 图 形 与 图 表 
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| Ha badmscom mm 


图 15.1 Alexa.com 图 形 与 图 表 效果 图 
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与 .1 项 目 需求 


如 果 你 是 一 个 股民 ， 那 么 你 就 会 知道 一 个 实时 股票 APP 最 主要 的 功能 包括 : 


@ ”查看 股票 实时 股价 ; 
@ ”可 以 具体 到 查询 股票 菜 日 或 某 个 时 间 段 的 股价 ; 
@ 一 个 时 间 段 的 股价 一 般 以 K 线 图 的 形式 直观 展现 。 


虽然 股票 还 涉及 交易 ， 但 本 例 只 是 简单 地 用 图 形 的 方式 展示 股票 的 走势 ， 所 以 不 涉及 数据 库 
的 操作 ， 也 不 涉及 银行 数据 或 股票 买卖 操作 。 


与 .2 技术 分 析 


从 项 目 需求 中 我 们 可 以 知道 ， 要 查看 股票 ， 不 只 是 显示 几 个 数字 这 么 简单 ， 还 必须 让 股价 以 
图 形 的 方式 展现 出 来 。 这 是 第 一 个 技术 点 : 图 形 展示 。 

股票 的 价格 有 时 间 间 隔 ， 我 们 可 以 查看 某 个 时 间 点 ， 也 可 以 查看 某 个 时 间 段 ， 这 个 时 候 当 用 
户 将 鼠标 放 在 某 个 时 间 段 时 ， 需 要 给 出 一 条 提示 信息 ， 提 示 的 内 容 有 两 点 ， 当前 时 间 、 当 前 股 
价 。 这 是 第 二 个 技术 点 : 实时 提示 。 

如 果 我 们 来 制作 实时 提示 功能 或 直接 画图 ， 都 是 比较 复杂 的 ，jQuery 提供 了 很 多 插件 库 ， 
来 自 全 球 各 地 。 为 了 方便 开发 ， 这 里 我 们 选择 一 个 图 表 库 : jqChart。 


1 .3 准备 jqchart 图 表 


jqChart 图 表 插 件 采用 纯 HTML 5 标准 与 jQuery 框架 设计 开发 ， 支 持 跨 浏览 器 兼容 性 、 支 持 
移动 设备 终端 、 支 持 视网膜 准备 等 功能 ， 其 图 表 可 以 导出 图 像 或 PDF 格式 便于 本 地 存储 。 可 以 
讲 ，jqChart 图 表 插件 具有 绝 佳 的 效能 与 先进 的 图 表 展示 功能 。 

总 结 一 下 ，jqChart 图 表 插 件 具有 如 下 主要 特性 : 

@ ”只 依赖 jQuery 框架 开发 ; 
采用 纯 HTMLS 的 画布 泻 染 ， 高 性 能 典范 ; 

最 大 的 支持 图 表 快 速 反 应 和 修复 功能 ; 
拥有 先进 的 数据 可 视 化 控件 : 图 表 ， 仪 表 ， 地 理 地 图 等 ; 
跨 浏览 器 支持 : 使 用 IE6+、 火 狐 、Chrome、Opera、Safari 等 浏览 器 测试 ; 
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@ ”支持 苹果 iOS 系统 和 Android 移动 设备 ; 
昌 。 针对 移动 设备 支持 全 触 控 操 作 ; 
@ 提供 十 富 的 文档 帮助 。 
15.3.1 下 载 jqChart 
jqChart 图 表 插件 的 官方 网 址 如 下 : 


在 jqChart 图 表 插 件 的 官网 中 ， 用 户 可 以 浏览 到 jqChart 插件 的 产品 介绍 、Sample 演示 案 
例 、 文 档 使 用 说 明 、 源 代码 下 载 链接 、 使 用 版 权 与 产品 注册 信息 (jqChart 图 表 插件 非 完 全 免费 
使 用 )、 设 计 人 员 反馈 和 支持 等 信息 ， 如 图 15.2 所 示 。 


MAS amd fe = 


¢ 3 @ Owwwiphatuomn Eo 


su jaqChart 


图 15.2 jqChart 图 表 插件 官方 网 站 


在 上 图 所 示 的 页 面 中 ， 读 者 还 可 以 看 到 jqChart 图 表 插 件 的 多 款 演示 样 例 ， 如 曲线 图 、 柱 状 
图 、 分 时 图 、 仪 表盘 等 ， 均 是 非常 实用 的 图 形 图 表 插件 。 下 面 单 击 “DOWNLOAD” 下 载 链 接 ， 
进入 jqChart 图 表 插 件 下 载 页 面 ， 如 图 15.3 所 示 。 
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Data Visualization for jQuery 


jQuery 


Verston aase | 30 Days rree Tal 
n 


Version 1.85.0 


图 15.3 jqChart 图 表 插 件 下 载 页 面 


在 jqChart 图 表 插件 下 载 页 面 ， 读 者 可 以 浏览 到 多 个 不 同 功能 版 本 的 下 载 链接 ， 可 以 选择 所 
需 的 版 本 进行 下 载 。 一 般 进 行 Web 开发 的 话 ， 可 以 选择 jqChart for jQuery 版 本 进行 下 载 ， 该 版 
本 是 支持 jQuery 框架 的 开发 包 ， 最 新 版 本 号 是 Version 3.8.5.0， 有 30 天 有 效 试用 期 。 

在 jqChart 图 表 插件 官方 网 站 首页 的 右上 方 ， 为 用 户 演示 了 一 个 模拟 股指 K 线 图 的 Demo 样 
例 。 从 示例 演示 图 中 ， 可 以 看 到 图 中 包含 坐标 系 、 双 曲线 、 数 据点 参数 信息 、 图 像 曲线 缩放 及 局 
部 放大 等 元 素 ， 基 本 上 股指 K 线 图 应 该 包含 的 功能 元 素 都 涵盖 其 中 了 ， 如 图 15.4 所 示 。 


“股指 kK 
线 ” 图 


A Fri, Aug 14th, 2009 Wa 
KPFD: 1457.4 ol 
1344.95 


1 
2005 2007 2009 2011 


图 15.4 jqChart 图 表 插件 官网 首页 “股指 K 线 ” 样 例 


jqChart 图 表 插件 当前 的 版 本 为 v3.8.5.0， 从 官方 网 站 选择 jqChart for jQuery 版 本 下 载 的 是 一 
个 169kB 的 压缩 包 ， 解 压缩 后 就 可 以 引用 其 中 包含 的 jqChart 插件 类 库 文件 来 实现 自己 的 图 表 插 
件 网 页 功能 了 。 


445 


构建 移动 网 站 与 APP: HTML 5+CSS 3+jQuery Mobile 入 门 与 实战 


15.3.2 ”参数 说 明 


现在 ， 通 过 应 用 jqChart 图 表 插件 开发 一 个 简单 的 柱状 图 应 用 ， 演 示 一 下 使 用 jqChart 图 表 插 
件 的 方法 ， 具 体 步骤 如 下 : 


(1) 新 建 一 个 名 称 为 jqChartAxisSettings.html 的 网 页 。 

(2) 打开 最 新 版 本 的 jqChart 图 表 插件 源 文件 夹 ， 将 其 中 的 js、css、theme 三 个 文件 夹 复制 
到 刚刚 创建 的 jqChartAxisSettings.html 页 面 文件 目录 下 。 其 中 ,js 文件 夹 包含 有 jQuery 框架 类 库 
文件 和 jqChart 图 表 插 件 类 库 文件 ，css 文件 夹 包 含有 jqChart 图 表 插 件 样式 文件 ，theme 文件 夹 
包含 有 jQuery-UI 框架 库 的 smoothness 样式 资源 文件 。 将 库 文件 与 样式 文件 分 开 管理 ， 便 于 后 期 
项 目 文件 增多 时 能 够 有 效 进行 管理 。 在 jqChartAxisSettings.html 页 面 文 件 中 添加 对 jQuery 框架 类 
库 文件 、jqChart 图 表 插 件 类 库 文件 的 引用 ， 如 下 所 示 。 


由 于 jqChart 图 表 插 件 完全 支持 HTMLS 标准 ， 所 以 针对 HTML5 中 新 加 入 的 <canvas> 绘 图 
元 素 ，IE9 以 前 的 浏览 器 版 本 可 能 会 无 法 很 好 地 支持 ， 所 以 这 里 引入 了 excanvas.js 文件 来 提供 
<canvas> 元 素 的 支持 ， 并 加 入 让 条 件 语句 进行 判断 。 

(3) 为 了 应 用 jqChart 图 表 插 件 在 页 面 中 绘制 出 柱状 图 ， 需 要 在 jqChartAxisSettings.html 页 
面 中 构建 一 个 <div> 元 素 作为 柱状 图 的 容器 ， 如 下 所 示 。 
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(4) 在 页 面 静态 元 素 构建 好 后 ， 需 添加 以 下 js 代码 对 jqChart 图 表 插件 进行 初始 化 操作 ， 具 
体 如 下 所 示 。 


以 上 js 代码 执行 了 以 下 操作 : 


在 页 面 文档 开始 加 载 时 ， 通 过 jQuery 框架 选择 器 $(WjqChart) 方 法 获取 id 值 等 于 
“jqChart” 的 <div> 元 素 ， 并 通过 jqChart 图 表 插 件 定义 的 jqChart0 构 造 方法 进行 初始 化 。 
在 初始 化 函数 内 部 ， 定 义 柱状 图 的 title 参数 ，title 可 以 理解 为 柱状 图 的 标题 。 

在 初始 化 函数 内 部 ， 设 定 axes 坐标 轴 参 数 : location:'le 包 ， 表 示 坐 标 轴 位 置 在 “ 左 ”; 
minimum:10， 表 示 坐 标 轴 坐标 最 小 值 为 10; maximum:100， 表 示 坐 标 轴 坐 标 最 大 值 为 
10; interval:10， 表 示 坐 标 轴 坐 标 间隔 为 10。 

在 初始 化 函数 内 部 ， 设 定 series 图 表 类 型 参数 : type:'column'， 表 示 图 表 类 型 为 柱状 
图 ; data 参数 用 于 设 定 柱状 图 数据 ， 数 据 采 用 二 维 数组 形式 [a,70]， 第 一 个 参数 表示 该 
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柱状 图 名 称 ， 第 二 个 参数 表示 具体 数值 。 


经 过 以 上 步骤 ， 基 于 jqChart 图 表 插 件 的 基本 柱状 图 应 用 的 代码 就 编写 完成 了 。 默 认 状 态 
下 ，jqChart 图 表 插件 提供 了 激活 与 关闭 图 表 数 据 、 跟 踪 鼠 标 位 置 显 示 数 据点 信息 等 公共 功能 ， 
设计 人 员 无 须 在 编写 用 户 代 码 过 程 中 进行 设 定 。 基 本 柱状 图 应 用 运行 效果 如 图 15.5、 图 15.6 和 
图 15.7 所 示 。 


-phpjworkepacejachanpemcjacl 己 @@ 二 -| 图 - oo -CHP 全 -四 -全 有 


@O osatie- cookies- 7 cs5- 回 forms- 国 Imeges- @ Irfcrmator- Miscellareous .2 Outine- 六 Resice- 咎 Tcols- 画 


基于 jaChart 图 表 插 件 的 基本 柱状 图 应 用 


柱状 图 应 用 - 坐标 轴 设 定 


[ee 柱 信 图 雪 所 


图 0/0 大 小 9 KB ”进度 .517 KB/ 落 。 直 间 1743 和 无 加- 中 半 名 双全 和 回合 四 加 加 四 回国 四 吓 
| 


15.5 jqChart 图 表 插件 基本 柱状 图 应 用 效果 图 (一) 


© fle///E/ecipsephp/workepace/iachartDemo/iacl 3 O C | 图 - cccov -cr-,p| Olr B+ a 
@ Disable- & Cookies 7 Css- 口 prms- 国 Images- © Infcrmatior- 国 Miscellanecus /7 Outine- f Resze- NTcol:- 国 


基于 jaChart 图 表 插 件 的 基本 柱状 图 应 用 


柱状 图 应 用 - 坐标 轴 设 定 


| 二 柱 代 国 妆 据 | 


图 ft00。 大 jg KB 通 格 517 虽 必 二 1742 无- 鸭 - 中 站 且 记 名 4 国 全 因 加 回国 四 加 四 虽 


15.6 jqChart 图 表 插件 基本 柱状 图 应 用 效果 图 (二) 
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-PP 全 ”四 -全 县 
@ Disable- 县 Cookies- 7 Css- Ll Forms 回 Images- @ Information* 同 Miscellaneous .outine- f Resize- RR Toaks- 天 


基于 jaChart 图 表 插件 的 基本 柱状 图 应 用 


柱状 图 应 用 - 坐标 轴 设 定 
根据 鼠标 位 置 显 
示 图 表 数 据 信息 


图 15.7 jqChart 图 表 插件 基本 柱状 图 应 用 效果 图 (三) 


由 例子 可 以 看 到 ， 通 过 调用 jqChart 图 表 插件 方法 设 定 其 属性 参数 ， 可 以 开发 页 面 图 表 应 
用 。 下 面向 读者 详细 讲述 jqChart 图 表 插件 的 方法 与 属性 参数 。 
jqChart 图 表 插 件 的 属性 参数 如 表 15-1 所 示 。 
表 15-1 jqChart 图 表 插件 属性 参数 列表 


属性 参数 描述 
该 参数 属性 表示 图 表 项 部 的 标题 
字符 串 或 者 组 合 结构 体 
title: Chart Title 


属性 参数 名 称 


title 


var title : { 
text: 'Chart Title’, 

font: '40px sans-serif’ 1/ 字体 设置 
; 
该 参数 属性 描述 图 表 边 框 
组 合 结构 体 


用 例 


border : { 
visilbe: true, // Boolean 类 型 ， 表 示 图 表 边 框 是 否 可 见 
border strokeStyle: red， ”// 表示 图 表 边框 颜色 
用 例 lineWidth: 4, / 表示 图 表 边 框 厚度 
cornerRadius: 12，。 ”// 表示 图 表 边 框 4 个 顶 角 的 圆 弧 曲率 
padding: 6 / 表示 图 表 边 框 内 边 距 数值 


}; 
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属性 参数 名 称 


background 


tooltips 


crosshairs 
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( 续 表 ) 
属性 参数 描述 
描述 该 参数 属性 描述 图 表 背 景 颜色 
类 型 字符 串 或 者 组 合 结构 体 
background: red' 
background : { 
type: ‘linearGradient , // 表示 图 表 背 景 颜色 线性 渐变 
x0: 0, // 起 点 x 坐标 
y0: 0, / 起 点 y 坐标 
用 例 x1: 0, / 终点 x 坐 标 
yl: 1 / 终点 y 坐 标 
colorStops: [ / 颜色 设 定 值 
{ offset: 0, color: #d2e6c9' }, / 起 点 颜色 
{ offset: 1, color ‘white’ } // 终点 颜色 
] 
} 
描述 该 参数 属性 用 于 显示 图 表 数据 点 信息 的 消息 提示 框 
类 型 组 合 结构 体 
tooltips : { 
disabled : false, / 表示 是 否 禁用 消息 框 
type: normal', / 消息 提示 框 类 型 
borderColor: 'auto', / 边框 颜色 
用 例 snapArea: 25, / 表示 显示 消息 提示 框 快照 的 区 域 
highlighting: true, / 表示 该 数据 点 是 否 需要 被 高 亮 显示 
highlightingFillStyle: rgba(204, 204, 204, 0.5), / 高 亮 显示 填充 颜色 风格 
highlightingStrokeStyle: rgba(204, 204. 204.0.5) / 高 亮 显示 笔触 颜色 风格 
描述 该 参数 属性 定义 十 字 线 连接 数据 点 对 应 的 轴 值 。 默 认 情况 下 ， 十 字 线 被 禁用 
类 型 组 合 结构 体 
crosshairs : { 
enabled: true, / 表示 是 否 禁 用 十 字 线 
用 例 hLine: { strokeStyle: #cc0a0c' }。 ”// 表示 水 平 十 字 线 笔触 颜色 


VvLine: { strokeStyle: #ccO0a0c’ } / 表示 垂直 十 字 线 笔触 颜色 
} 
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( 续 表 ) 
属性 参数 名 称 属性 参数 描述 
描述 该 参数 属性 用 于 显示 图 表 阴 影 效果 
类 型 组 合 结构 体 


shadows : { 
enabled: true, // 表示 是 否 允 许 阴影 效果 
shadows shadowColor: ‘gray’, / 表示 阴影 颜色 
用 例 shadowBlur: 10, / 表示 阴影 效果 
shadowOffsetX: 3, / 表示 阴影 又 轴 方 向 偏 移 值 
shadowOffsetY: 3 / 表示 阴影 Y 轴 方向 偏 移 值 


} 
描述 该 参数 属性 用 于 显示 图 表 动 画 效果 
类 型 组 合 结构 体 


animation : { 
animation enabled : true, / 表示 是 否 允 许 动 画 效果 
用 例 delayTime : 1, // 表示 动画 效果 延迟 时 间 
duration : 2 / 表示 动画 效果 持续 时 间 


} 
描述 该 参数 属性 用 于 显示 图 表 水 印 效果 
类 型 组 合 结构 体 


watermar : { 
text: 'Copyright Information', // 表示 水 印 文本 
watermark fillStyle: red', // 表示 水 印 文本 颜色 
用 例 font: '16px sans-serif , / 表示 水 印 文本 字体 
hAlign: fight / 表示 水 印 文本 水 平 位 置 
vAlign: bottom' / 表示 水 印 文本 垂直 位 置 


}, 


jqChart 图 表 插件 有 一 些 非 常 重要 的 属性 参数 ， 璧 如 Axes 坐标 轴 属 性 、series:type 图 表 类 
型 属性 和 data 数据 点 属性 等 ， 都 是 设计 图 表 必 须要 使 用 的 。 下 面 分 别 对 这 些 属 性 参数 进行 讲 
解说 明 。 

jqChart 图 表 插件 的 Axes 属性 是 用 来 描述 图 表 坐 标 轴 的 参数 ， 图 表 插 件 根据 它 来 绘制 图 表 内 
的 数据 点 曲线 图 形 ， 每 个 图 表 〈 除 了 饼 图 ) 都 包含 了 绘图 区 域 的 轴 ， 大 部 分 的 图 表 使 用 X 轴 和 
立轴 作 图 。jqChart 图 表 插件 的 Axes 属性 参数 如 表 15-2 所 示 。 
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类 型 名 称 


Category Axis 


Linear Axis 


DateTime Axis 


表 15-2 jqChart 图 表 插 件 一 一 Axes 属性 参数 列表 


类 型 描述 


该 类 型 坐标 轴 用 于 表示 由 一 组 沿 轴 离 散 值 的 分 组 数据 ， 它 定义 了 一 组 沿 图 表 轴 
出 现 的 标签 


用 例 


axes:[ 

{ 

type: ‘category', // 坐标 轴 类 型 

location: 'bottom', / 坐标 轴 位 置 

categories: [Cat 1 'Cat 2','Cat 3', 'Cat 4', 'Cat 5', 'Cat 6]/ 坐 标 轴 标 签 

] 

该 类 型 称 为 直线 坐标 轴 ， 映 射 数值 的 最 小 值 和 最 大 值 沿 图 表 轴 之 间 均 匀 。 默 认 
情况 下 ， 它 决定 了 图 表 数 据 的 最 小 值 、 最 大 值 和 间隔 值 ， 以 适应 所 有 屏幕 上 的 
图 表 元 素 。 用 户 也 可 以 显 式 地 设置 这 些 属性 的 特定 值 

axes:[ 

{ 

type: ‘inear, / 坐标 轴 类 型 

location: ‘left, // 坐标 轴 位 置 

minimum: 10, / 坐标 轴 最 小 值 

maximum: 100, // 坐标 轴 最 大 值 

interval: 10 / 坐标 轴 间 隔 

} 

] 

该 类 型 称 为 时 间 坐标 轴 ， 映 射 时 间 值 的 最 小 值 和 最 大 值 沿 图 表 轴 之 间 均 匀 。 默 
认 情 况 下 ， 它 决定 了 图 表 数 据 的 最 小 值 、 最 大 值 和 间隔 值 ， 以 适应 屏幕 上 所 有 
的 图 表 数据 元 素 。 用 户 也 可 以 显 式 地 设置 这 些 属 性 的 特定 值 

axes:[ 

{ 

type: dateTime'， / 坐标 轴 类 型 

location: 'bottom', 

minimum: new Date(2013, 1, 4), 

maximum: new Date(2013, 1, 18), 

interval: 1, 

intervalType: 'days' // "years' | 'months' | ‘weeks' | 'days' | ‘minutes' | 'seconds' | 
"millisecond' 

} 

] 


jqChart 图 表 插 件 的 series:type 属性 是 用 来 描述 图 表 类 型 的 参数 ， 图 表 插 件 根据 它 来 绘制 不 同 
风格 类 型 的 图 表 。jqChart 图 表 插 件 的 series:type 属性 参数 如 表 15-3 所 示 。 
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类 型 名 称 


Area Chart 


Bar Chart 


Column Chart 
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表 15-3 jqChart 图 表 插件 一 一 series:type 属性 参数 列表 


类 型 描述 
描述 该 类 型 基于 折线 图 ， 面 积 图 之 轴 和 线 之 间 的 区 域 ， 重 点 使 用 不 同 的 颜色 和 纹理 
来 表现 。 其 通常 强调 随时 间 变 化 的 程度 ， 并 显示 部 分 与 整体 的 关系 
series: [ 
{ 
type: 'area', // 图 表 类 型 
title: 'Area 1', 
fillStyle: #418CFO', 
用 例 ua 
[A', 56], ['B', 30], [C', 62],[D', 65], [E, 40], [F. 36], [G', 70] / 数据 点 数组 
] 
} 
] 
描述 该 类 型 称 为 条 形 图 ， 说 明了 各 个 项 目 之 间 的 比较 。 其 图 表 和 矩形 条 为 了 更 加 注重 
比较 值 〈 而 不 太 注 重 时 间 ) 而 呈 水 平 显示 ， 并 与 长 度 成 正比 
series: [ 
{ 
type: ‘bar, / 图 表 类 型 
title: "Bar 1', 
用 例 fillStyle: #418CFO', 
data: [ 
[A', 56],[B', 30], ['C', 62], ['D', 65], [E', 40], [FP', 36], ['G', 70] // 数据 点 数组 
] 
} 
] 
描述 该 类 型 称 为 柱状 图 ， 使 用 列 〈 垂 直 和 矩形 ) 的 顺序 来 显示 。 与 其 他 类 别 相 比 ， 其 
具有 单独 的 参考 值 
series: [ 
type: ‘column', / 图 表 类 型 
title: 'Column 1', 
用 例 | fillStyle: #418CF0', 


data: [ 

[A', 56], ['B', 30], ['C', 62], [D', 65], [E', 40], [F', 36], ['G', 70]] / 数据 点 数组 
} 

] 
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类 型 名 称 


Line Chart 


Pie Chart 


Range Chart 


HTML 5+CSS 3+jQuery Mobile 入 门 与 实战 


( 续 表 ) 
类 型 描述 
描述 该 类 型 称 为 折线 图 (或 线 图 ) ， 是 所 有 图 类 型 中 最 普通 的 一 个 成 员 ， 其 原理 是 通 
过 由 数据 点 连接 线 来 显示 定量 信息 ， 折 线 图 往往 说 明 随 着 时 间 推 移 的 趋势 
Series: [ 
€ 
type: ‘line', / 图 表 类 型 
title: Line 1', 
用 例 | fillStyle: #418CF0', 
data: [ 
[A', 56], [B', 30], ['C' 62], ['D', 65], ['E', 40], [F, 36], [G', 70]] / 数据 点 数组 
} 
] 
i 于 图 、 扇 形 图 、 分 段 图 等 ， 并 且 是 最 广泛 使 用 的 图 表 类 型 之 
描述 ”| 一 。 饼 图 是 将 圆 分 成 扇 区 ， 显 示 百 分 比 或 相对 值 来 进行 相互 比较 ， 有 助 于 分 析 统 
计数 据 类 型 的 整体 趋势 
Series: [ 
站 
type: 'pie’, / 图 表 类 型 
labels: { // 图 表 字 体 风格 
stringFormat: 9%0.1 亿 690 
valueType: 'percentage', 
font: '15px sans-serif , 
fillStyle: ‘white’ 
用 例 上 
explodedRadius: 10, // 图 饼 半径 
explodedSlices: [5], // 图 饼 分 割 区 域 数量 
data: [ / 数据 点 数组 
[United States', 65], [United Kingdom', 58], [Germany', 30], 
[India', 60], [Russia' 65], [China', 75] 
] 
$ 
| 
描述 该 类 型 称 为 范围 图 表 ， 其 通过 绘制 每 个 数据 点 两 个 Y 值 ， 每 个 Y 值 都 会 被 绘制 成 
折线 图 的 数据 范围 ，Y 值 之 间 的 范围 内 可 以 被 填充 颜色 或 图 像 
series: [ 
{ 
type: range', // 图 表 类 型 
title: 'Series 1', 
data: [ / 数据 点 数组 
用 例 | [a',33,43], [B.57.62] [C, 13, 30], 


[D’, 12, 40], [E', 35, 70], [F', 7, 30], ['G', 24, 30] 
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类 型 名 称 


第 15 章 案例: 实现 一 个 实时 股票 APP 


( 续 表 ) 
类 型 描述 


Scatter Chart 


Spline Chart 


Stock Chart 


] 


该 类 型 称 为 散 点 图 ， 是 用 来 显示 两 组 值 之 间 的 相关 性 ， 散 点 图 经 常 被 用 于 定性 实 
描述 ”| 验 数 据 和 科学 数据 建 模 。 一 般 散 点 图 通常 不 与 时 间 相 关 的 数据 组 合 使 用 (因为 线 


路 图 会 更 适合 此 种 情况 ) 
series: [ 
{ 
type: 'scatter’, // 图 表 类 型 
title: 'Scatter’, 
用 例 data: [ 


[1, 62], [2, 60], [3, 68], [4, 58], [5, 52], [6, 60], [7, 48]/ 数据 点 数组 


该 类 型 称 为 样 条 曲线 图 表 ， 其 通过 一 系列 数据 点 的 相对 位 置 来 绘制 并 拟 合成 曲线 


We 折线 图 表 


series: [ 

{ 

type: 'spline’, / 图 表 类 型 

title: 'Spline 1', 

fillStyle: #418CFO', 

data: [ 

[A', 56], [B', 30], ['C, 62], ['D', 65], ['E', 40], [F, 36], [G', 70] / 数据 点 数组 


用 例 


该 类 型 称 为 股票 图 ， 其 通常 是 用 来 说 明 股票 价格 ， 包 括 股票 的 打开 ， 关闭， 高 、 
低 价格 点 等 。 同 时 ， 这 种 类 型 的 图 表 也 可 用 于 分 析 科 学 数据 ， 因 为 每 个 系列 的 数 
据 均 可 以 显示 高 值 ， 低 值 ， 开 盘 值 和 收盘 值 。 股 票 图 的 开盘 值 显示 在 左 侧 ， 并 且 
在 右 侧 显示 收盘 值 


描述 


// 图 表 类 型 
/ 数据 点 数组 ， 一 般 通 过 编程 获取 
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( 续 表 ) 
类 型 名 称 
该 类 型 称 为 趋势 线 图 表 ， 是 用 来 描述 数据 趋势 的 图 表 系 列 。 例 如 : 向 上 倾斜 的 线 
可 以 表示 在 数 月 内 销售 数值 增加 的 趋势 。 趋 势 线 一 般 用 于 预测 问题 的 研究 ， 因 此 
又 称 为 回归 分 析 
Series: [ 
Trendli 
3 : "trendline', 1 
人 type: 图 表 类 型 


data: data, / 数据 点 数组 ， 一 般 通 过 编程 获取 
trendlineType: linear， // 趋势 线 类 型 ， 值 为 linear 或 者 'exponential 


以 上 就 是 jqChart 图 表 插 件 属性 参数 的 说 明 ， 其 中 还 有 一 些 不 常 使 用 的 属性 参数 没有 在 此 列 
举 ， 感 兴趣 的 读者 可 以 阅读 jqChart 图 表 插件 官网 上 的 产品 文档 进行 了 解 。 


1〗9 .4 开发 一 个 模拟 股票 指数 实时 图 应 用 


本 节 将 基于 jqChar 图 表 插件 开发 一 个 模拟 股票 实时 图 应 用 ， 其 中 模拟 了 美国 主要 的 两 大 股 
指 :“ 道 琼斯 ”与 “ 纳 斯 达 克 ” 的 组 合 曲线 图 。 该 例 演示 了 如 何 组 合 多 个 实时 股票 指数 曲线 图 的 
方法 ， 及 使 用 动画 操作 和 曲线 图 的 平移 、 缩 放 功能 。 通 过 这 个 样 例 的 开发 过 程 ， 向 设计 人 员 较 为 
全 面 的 演示 了 应 用 jqChart 图 表 插 件 的 开发 方法 。 


15.4.1 添加 jqChart 图 表 插件 插件 库 文件 


使 用 文本 编辑 器 新 建 一 个 名 为 jqChartStock.html 的 网 页 ， 将 网 页 的 标题 指定 为 “基于 
jqChart 图 表 插件 模拟 股票 实时 图 应 用 ”。 本 应 用 基于 jQuery 框架 和 jqChart 图 表 插 件 进行 开发 ， 
需要 添加 一 些 必要 的 类 库 文件 与 CSS 样式 文件 ， 具 体 代码 如 下 所 示 。 
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15.4.2 ”构建 实时 图 页 面 的 布局 


使 用 jqChart 图 表 插 件 在 页 面 中 绘制 股票 实时 图 ， 需 要 在 jqChartStock.html 页 面 中 构建 一 个 
<div> 元 素 用 来 作 股 票 实时 图 的 容器 ， 具 体 代码 如 下 所 示 。 


构建 移动 网 站 与 APP: HTML 5+CSS 3+jQuery Mobile 入 门 与 实战 】 | 


15.4.3 ”模拟 股票 实时 图 的 初始 化 操作 


在 页 面 元 素 股票 实时 图 容器 构建 好 后 ， 需 添加 以 下 js 脚本 代码 对 jqChart 图 表 插件 进行 初始 
化 操作 ， 具 体 代码 如 下 所 示 。 


ET 


构建 移动 网 站 与 APP: HTML 5+CSS 3+jQuery Mobile 入 门 与 实战 


以 上 js 代码 执行 了 以 下 操作 : 


@ ”编写 js 自 定义 函数 addDays0 〇 用 来 实现 获取 日 期 功能 。 

@ 编写 js 自 定义 函数 round() 用 来 实现 获取 随机 数 。 

@@ ”定义 一 些 全 局 变量 ， 通 过 以 上 日 期 函数 、 随 机 数 函 数 以 及 for 循环 语句 生成 随机 股票 指 
数 数据 ， 用 于 模拟 股票 指数 曲线 图 ， 并 将 这 些 随 机 生成 的 数据 保存 在 定义 好 的 全 局 变 
量 (yValuel，yValue2，data) 之 中 。 

@ 在 页 面 文档 开始 加 载 时， 定义 具 有 linearGradient 渐变 风格 背景 参数 。 

@ ”在 页 面 文档 开始 加 载 时， 通过 jQuery 选择 器 $( 帮 qChart) 方 法 获取 id 值 等 于 “jqChart” 
的 <div> 元 素 ， 并 通过 jqChart 图 表 插 件 定义 的 .jqChart0 构 造 方法 进行 初始 化 。 

@ ”在 初始 化 函数 内 部 ， 定 义 模拟 股票 实时 图 的 title 参数 ，title 定义 实时 图 的 标题 。 

@ 在 初始 化 函数 内 部 ， 定 义 模拟 股票 实时 图 的 border 参数 ， 用 来 描述 jqChart 图 表 边 框 颜色 。 

@ ”在 初始 化 函数 内 部 ， 定 义 模拟 股票 实时 图 的 background 参数 ， 通 过 序号 4 的 操作 ， 用 
background 变量 对 其 赋值 。 

@ ”在 初始 化 函数 内 部 ， 定 义 模拟 股票 实时 图 的 animation 参数 ， 用 来 确定 jqChart 图 表 动 
画 效 果 的 持续 时 间 。 
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在 初始 化 函数 内 部 ， 定 义 模拟 股票 实时 图 的 tooltips 参数 ， 通 过 后 面 的 绑 定 消息 提示 框 
函数 来 获取 格式 化 的 信息 提示 。 

在 初始 化 函数 内 部 ， 定 义 模拟 股票 实时 图 的 shadows 参数 ，shadows 定义 实时 图 的 阴影 
效果 。 

在 初始 化 函数 内 部 ， 定 义 模拟 股票 实时 图 的 crosshairs 参数 ，crosshairs 定义 实时 图 的 十 
字 线 ， 此 处 hLine:false 表示 取消 水 平 十 字 线 ， 该 处 设计 是 依据 股票 指数 特点 而 定 的 。 
在 初始 化 函数 内 部 ， 设 定 axes 坐标 轴 参 数 : type:'dateTime'， 表 示 坐 标 轴 类 型 为 时 间 轴 
坐标 ; location:bottom'， 表 示 坐 标 轴 位 置 在 “底部 ”; zoomEnabled:true， 表 示 图 表 支 
持 缩放 。 

在 初始 化 函数 内 部 ， 设 定 series 图 表 类 型 参数 : type:line'， 表 示 两 个 图 表 类 型 均 为 折线 
图 ; data 参数 用 于 设 定 折线 图 数据 ， 数 据 源 采 用 上 面 序号 3 定义 好 的 全 局 变量 。 

在 初始 化 函数 最 后 ， 通 过 绑 定 函数 对 消息 提示 框 数据 信息 进行 格式 化 ， 并 提供 给 序号 
10 步骤 中 的 tooltips 参数 使 用 。 


15.4.4 ”模拟 股票 实时 走势 图 APP 最 终 效果 


经 过 以 上 步骤 ， 基 于 jqChart 图 表 插件 的 模拟 股票 实时 图 应 用 就 完成 了 。 该 应 用 在 jqChart 图 表 
插件 初始 化 函数 内 部 定义 了 两 个 图 表 类 型 参数 为 折线 图 (ine) 的 组 合 形式 ， 实 现 了 “道琼斯 ”指数 与 
“ 纳 斯 达 克 ” 指 数 的 合集 。 其 运行 效果 如 图 15.8 所 示 。 当 鼠标 在 图 表 框 内 曲线 上 移动 时 ， 会 显示 红 
色 的 十 字 线 ， 并 且 该 数据 点 的 信息 将 会 以 消息 提示 框 的 形式 展现 给 用 户 ， 如 图 15.9 所 示 。 


ET yal 
Chart 才 括 件 并 有 股 时 全 二 
| € @ fle//E/eclpse-php/worcspace/iaChartDemoliac! @ cj] 图- ceooe<Gvvp 加- 四 - 售 且 
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图 15.8 基于 jqChart 图 表 插 件 模拟 股票 实时 图 应 用 效果 图 (一 》 
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图 15.9 基于 jqChar 图 表 插 件 模拟 股票 实时 图 应 用 效果 图 (二 ) 


通过 单 击 “ 激 活 /关闭 ”按钮 关闭 “道琼斯 ”股指 曲线 图 ， 单 独 显 示 “ 纳 斯 达 克 ” 股 指 曲线 
图 ， 通 过 右上 角 的 “缩放 -还 原 / 局 部 放大 ”功能 按钮 ， 可 将 其 中 一 段 曲线 局 部 放大 显示 ， 其 效果 
如 图 15.10 所 示 。 
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该 滚动 条 具有 平移 功能 


轩 0 大 4 二 547K8/6 车 4944 到 乱 -四 过 后 国 -而 生 号 国 国 回国 国 回 加 四 
图 15.10 基于 jqChart 图 表 插 件 模拟 股票 实时 图 应 用 效果 图 (三) 
另外 ， 上 图 中 的 滚动 条 具有 平移 股指 曲线 的 功能 ， 用 户 可 以 自行 测试 。 至 此 ， 基 于 jqChart 


图 表 插件 的 模拟 股票 实时 图 应 用 的 效果 基本 展示 给 读者 了 ， 感 兴趣 的 读者 可 以 依照 前 面 几 个 样 例 
的 编写 方法 ， 并 结合 jqChart 图 表 插 件 的 官方 文档 ， 开 发 出 不 同 功能 的 图 表 应 用 。 
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15.5 小 


本 章 利用 一 个 jqChart 库 实 现 了 一 个 简单 的 股票 APP， 因 为 实在 过 于 简单 ， 这 里 只 希望 读者 
能 了 解 各 种 插件 库 的 使 用 方法 。 对 于 开发 者 来 说 ， 有 时 候 不 必要 重复 造 轮子 ， 选 择 合适 的 工具 能 
够 快速 开发 ， 也 可 以 走出 自己 的 高 手 之 路 。 
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第 14 章 
< 法例 : 实现 一 个 在 线 视频 插 放 器 > 


本 章 将 继续 将 jQuery Mobile 与 PHP 技术 相 结合 ， 实 现 一 款 Web 端的 在 线 视频 播放 器 。 在 
视频 播放 功能 上 将 使 用 HTML 5 中 定义 的 video 控件 。 

本 章 主要 包括 以 下 内 容 : 

@ video 控件 的 使 用 方法 

@ jQuery Mobile 利用 分 栏 布局 开发 适合 平板 电脑 的 应 用 

@ ”通过 模仿 来 开发 应 用 的 设计 方法 


项 目 需求 


编写 本 书 时 ， 笔 者 偶然 看 到 了 iTunes 上 一 款 介绍 jQuery Mobile 的 应 用 ， 觉 得 它 的 界面 非常 
清新 ， 于 是 产生 了 模仿 它 来 做 点 什么 的 想法 。 该 应 用 界面 如 图 16.1 和 图 16.2 所 示 ， 可 以 在 
iTunes 中 搜索 jQuery Mobile 关键 字 来 找到 它 。 


Jouery Mobile Overview 


图 16.1 主 界面 图 162 二 级 页 面 
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这 款 应 用 采用 了 针对 平板 电脑 屏幕 的 分 栏 式 布局 。 虽 然 之 前 也 知道 jQuery Mobile 有 专门 的 
分 栏 插件 和 布局 ， 但 是 思维 却 总 是 受 官方 API 实例 的 棱 糙 ， 以 至 于 一 直 忽略 这 一 点 。 因 此 笔者 
决定 模仿 这 款 应 用 的 界面 开发 一 款 应 用 来 加 深 理 解 ， 这 对 读者 来 说 也 有 极 大 的 好 处 。 

既然 只 是 一 个 练习 ， 那 么 笔者 也 不 打算 为 它 加 入 太 复 杂 的 设计 ， 本 项 目 仅 有 3 个 设计 ， 首 先 
是 首页 ， 模 仿 图 16.2 所 示 的 界面 ， 随 意 加 入 一 点 信息 以 及 几 个 栏目 ， 其 次 就 是 进入 各 个 栏目 后 
可 以 选择 视频 ， 最 后 一 个 页 面 是 可 以 播放 的 视频 ， 以 及 相关 视频 的 列表 。 


界面 设计 


在 上 一 节 中 已 经 基本 确立 了 该 项 目的 大 概 需求 ， 那 么 在 本 节 将 给 出 所 需要 的 3 个 页 面 的 大 概 
布局 。 

(1) 首页 的 布局 完全 模仿 图 16.1 给 出 的 样式 ， 将 整个 页 面 分 为 左右 两 栏 ， 左 侧 约 占 整个 页 
面 宽度 的 40% 左 右 ， 包 含 上 方 一 枚 logo 和 在 logo 下 面 的 一 排列 表 ， 列 表 中 的 内 容 应 该 是 一 些 对 
该 应 用 的 介绍 、 版 权 说 明 等 。 按 照 笔者 的 计划 这 应 该 是 一 个 类 似 于 个 人 博客 的 视频 点 播 网 站 系 
统 ， 因 此 非常 适合 加 入 一 些 类 似 于 “关于 作者 ”或 “站 长 简介 ”之 类 的 内 容 。 由 于 这 部 分 不 是 重 
点 ， 所 以 留 给 读者 自己 去 发 挥 了 。 最 终 设 计 好 的 布局 如 图 16.3 所 示 。 


之 前 介绍 过 可 以 用 jQuery Mobile UI Builder 来 预览 设计 的 页 面 ， 但 是 对 于 这 种 分 栏 的 设计 却 
无 法 通过 该 工具 进行 试验 ， 希 望 官 方 能 够 早日 改进 。 另 外 由 于 笔者 此 次 计划 模仿 图 16.1 中 


的 界面 (包括 配色 ) ， 因 此 修改 CSS 也 是 少不了 的 。 


(2) 接 下 来 设计 二 级 页 面 的 列表 效果 ， 如 图 16.4 所 示 。 


jQuery Jobile 教 学 


16.3 主页 界面 布局 164 二 级 页 面 布局 


465 


构建 移动 网 站 与 APP: HTML 5+CSS 3+jQuery Mobile 入 门 与 实战 


(3) 还 剩 最 后 一 个 视频 播放 页 面 ， 原 本 笔者 是 希望 依旧 参考 这 种 布局 ， 仅 仅 将 右 侧 的 节目 
列表 改 成 一 个 video 控件 就 可 以 了 ， 但 是 经 过 简单 的 对 比 之 后 ， 决 定 将 原本 在 左 侧 的 节目 列表 移 
动 到 右 侧 ， 在 左 侧 显 示 视 频 播放 的 video 控件 。 因 为 大 多 数 人 习惯 用 右手 进行 操作 ， 将 节目 列表 
放 在 右 侧 可 以 让 用 户 操作 得 更 舒适 ， 而 且 优酷 等 网 站 也 采取 了 类 似 的 布局 ， 笔 者 觉得 遵从 这 一 习 
惯 会 比较 好 一 点 〈 如 图 16.5 所 示 为 笔者 设计 出 的 视频 播放 页 面 布局 ， 如 图 16.6 所 示 为 优酷 视频 
播放 页 的 部 分 截图 )。 


图 16.5 ”视频 播放 页 面 


优酷 独家 热 映 中 每 周二 更 新 


图 16.6 ”优酷 网 视频 播放 页 面部 分 截图 


观察 图 16.6 可 以 看 到 ， 屏 幕 的 左 侧 正 在 播放 广告 (笔者 对 此 非常 不 喜欢 )， 右 侧 则 展示 
了 相关 的 视频 列表 ， 用 户 可 以 随时 通过 单 击 这 里 来 对 视频 进行 切换 ， 如 果 换 到 左 侧 用 户 可 能 
会 不 大 习惯 。 
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1 6 .了 界面 的 实现 


既然 之 前 已 经 设计 出 了 页 面 的 布局 ， 那 么 接 下 来 要 做 的 就 是 用 代码 来 实现 它们 了 。 参 考 图 
16.1， 本 项 目 加 入 了 在 jQuery Mobile 默认 的 5 组 主题 中 不 存在 的 红色 和 绿色 ， 因 此 就 需要 先 在 
网 站 http://jquerymobile.com/themeroller/ 上 配置 合适 的 主题 样式 文件 。 


16.3.1 ”主题 文件 的 获取 


首先 进入 网 址 http://jquerymobile.com/themeroller/， 稍 微 等 待 几 秒 钟 (由 于 页 面 有 许多 交 
互 效果 因此 加 载 会 比较 慢 )， 可 以 看 到 如 图 16.7 所 示 的 对 话 框 ， 单 击 Get Rolling 按钮 进入 主 
题 设置 页 面 。 


To upgrade a theme to 1.3 


Uncompressed theme, then twea 


图 16.7 jQuery Mobile 进入 主题 编辑 器 后 的 界面 


由 于 这 次 只 需要 红 蓝 两 种 配色 ， 其 他 项 目 默认 白色 主题 ， 另 外 在 图 16.2 中 发 现 被 选中 的 列 
表 项 被 泻 染 成 了 黑色 以 便 区 分 ， 但 是 总 共 只 有 两 组 主题 就 足够 了 。 笔 者 选择 的 配色 方案 如 图 16.8 
所 示 。 完 成 之 后 单 击 屏幕 上 方 的 DownLoad 按钮 获取 样式 文件 。 


Sample text and links Sample text and links Sample text and lints 


UistHeader 


Read only list item Read-only list item 
Linked list tom © Linkedlistiom © 
© pa © radio 
Chechbox checkbox 
二 加 ~ 加 ~ 

Toxt opt a Se 

oa um Cs! mm 

本 Button 已 Button © Button 


图 16.8 设计 好 的 主题 样式 
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匡 寺 可 以 通过 调节 顶部 的 滑 块 来 获取 更 多 的 颜色 。 


之 后 将 下 载 到 的 文件 解压 ， 其 中 有 两 个 CSS 文件 ， 将 它们 引入 HTML 文件 中 ， 按 照 如 下 代 
码 做 一 个 简单 的 页 面 。 


保存 后 运行 结果 如 图 16.9 所 示 。 
ED 


16.9 ”保存 后 的 页 面 有 了 新 的 主体 颜色 
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范例 中 的 代码 相信 读者 已 经 非常 熟悉 了 ， 在 第 8 行 有 一 句 <link rel="stylesheet" 
src="video.min.css" />， 其 作用 就 是 将 新 的 CSS 样式 引入 页 面 中 。 通 过 图 16.9 可 以 看 出 ， 页 面 的 
头 部 栏 、 尾 部 栏 还 有 加 入 的 按钮 都 变 为 之 前 默认 主题 所 没有 的 颜色 ， 说 明 新 的 主题 样式 已 经 被 加 
载 进 页 面 中 ， 可 以 继续 进行 界面 开发 了 。 


在 第 7 行 有 一 名 <link rel="stylesheet”sre="jquery.mobile.min.css" />， 它 的 作用 是 引入 jQuery 
Mobile 自 带 的 主题 样式 文件 。 新 引入 的 主题 一 定 要 放 在 它 的 后 面 ， 这 样 才 能 将 旧 的 内 容 覆 盖 
掉 ， 读 者 可 以 自行 蔡 换 这 两 行 的 内 容 看 一 下 效果 。 


16.3.2 ”主页 界面 的 实现 
接 下 来 就 要 实现 首页 的 界面 了 ， 具 体 代码 如 下 所 示 。 
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运行 结果 如 图 16.10 所 示 。 


: 实现 一 个 在 线 视频 播放 器 


jQuery 电影 © 
Mobile | 到 © 
短片 © 
电视 剧 © 
EE 。 视频 教 各 © 
项 目 人 组 [EGR 
SEE 日 4 © 

| 
十 万 个 将 笑 话 © 

jQuery Mobile © | 
视 颁 点 播 © 
| jQuery Mobile 教 学 © 

基于 jQuery Mobile 的 视频 点 播 系统 
图 16.10 首页 界面 


将 首页 效果 实现 之 后 ， 笔 者 发 现 自己 选取 的 主体 颜色 与 原本 要 模仿 的 配色 有 一 定 的 偏差 ， 另 
外 顶部 的 logo 也 做 得 非常 难看 。 感 谢 jQuery Mobile 让 笔者 这 样 没有 美术 细胞 的 人 也 能 独立 
开发 出 像 模 像样 的 应 用 来 ， 至 于 颜色 和 logo 的 遗憾 就 靠 读者 来 帮助 弥补 了 。 


注意 看 代码 第 19 行 ， 为 样式 .ui-grid-a .ui-block-b 加 入 了 margin-left 属性 ， 这 样 才能 保证 两 
边 的 列表 不 至 于 贴 在 一 起 。 另 外 注意 头 部 栏 的 位 置 有 一 条 绿色 的 线条 ， 当 头 部 栏 和 尾部 栏 中 没有 
内 容 时 就 会 以 这 样 的 形式 显示 出 来 ， 这 对 页 面 是 一 种 非常 不 错 的 装饰 。 


16.3.3 ”二 级 页 面 的 实现 
接 下 来 实现 用 来 显示 视频 列表 的 二 级 页 面 ， 具 体 代码 如 下 所 示 。 
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第 16 章 案例 : 实现 一 个 在 线 视频 播放 器 


运行 结果 如 图 16.11 所 示 。 


oo oo 局 
沪 
所 


内 电 


效 
加 
beeeoeoloeloleelee 


时 让 人 
基于 jQuery Moblle 的 视频 点 播 系统 
图 16.11 视频 列表 页 面 


16.3.4 ”视频 播放 界面 的 实现 
接 下 来 开始 实现 视频 播放 界面 ， 这 时 就 要 用 到 期 办 已 久 的 video 控件 了 ， 具 体 代码 如 下 所 示 。 
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第 16 章 “案例 : 实现 一 个 在 线 视频 播放 器 


52 </body> 
53 </html> 


运行 结果 如 图 16.12 所 示 。 


生活 大 爆炸 -第 四 集 


溃 
中 
广 
ooeoooeooeooeoeooeoooeoeoe 


基于 jQuery Mobile 的 视频 点 播 系 统 
图 16.12 视频 播放 界面 
与 之 前 的 音乐 播放 器 略 有 不 同 的 是 ， 在 代码 第 34 行为 video 控件 加 入 了 属性 
controls="controls"， 这 样 一 来 ， 在 视频 下 方 就 自动 加 入 了 控制 视频 播放 /和 暂停、 音量 等 功能 的 面 
板 ， 使 用 起 来 非常 方便 ， 而 且 在 面板 的 最 右 侧 有 一 个 按钮 ， 单 击 之 后 可 以 自动 转换 成 全 屏 播 放 。 


事实 上 audio 控件 同样 有 controls 属性 ， 但 通常 不 会 去 用 它 ， 只 因为 一 个 原因 : 太 恬 。 所 以 
l 播放 音乐 时 通常 是 不 会 使 用 默认 的 控制 面板 的 。 


数据 库 的 设计 与 连接 


本 章 的 项 目 非常 简单 ， 这 也 就 决定 了 它 的 数据 库 非 常 简单 ， 这 里 先 在 MySQL 中 新 建 一 个 数 
据 库 ， 命 名 为 video。 
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16.4.1 数据 库 设 计 


在 video 这 个 数据 库 中 ， 最 重要 的 内 容 就 是 视频 了 ， 因 此 先 建 立 一 个 表 ， 命 名 为 
video_info， 其 中 包括 用 来 标识 视频 的 video id、 视频 的 名 称 video_name， 另 外 还 要 有 视频 文件 
的 名 称 ， 该 表 的 数据 结构 如 表 16-1 所 示 。 


表 16-1 表 video_info 的 数据 结构 


字段 名 说 明 类 型 
er 
每 个 视频 都 属于 某 个 专辑 ， 如 生活 大 爆炸 的 第 一 集 属于 专辑 “生活 大 爆炸 ”， 所 以 还 要 加 入 
-个 表 ， 命 名 为 zhuanji_info， 并 在 其 中 加 入 两 个 字段 : 一 个 用 来 标识 专辑 的 编号 zhuanji_id; 另 
-个 用 来 标识 专辑 的 名 称 zhuanji_name。 该 表 的 数据 结构 如 表 16-2 所 示 。 
表 16-2 表 video_name 的 数据 结构 


字段 名 说 明 类 型 
ET 
非常 类 似 的 ， 每 个 专辑 也 都 属于 某 个 栏目 ， 这 就 需要 再 建立 一 个 名 为 lanmu_info 的 表 ， 数 
据 结 构 如 表 16-3 所 示 。 


表 16-3 表 lanmu_info 的 数据 结构 


类 型 


这 样 数 据 库 中 的 基本 表 就 算是 完成 了 ， 但 是 还 不 够 ， 还 需要 两 个 表 来 将 它们 联系 起 来 ， 因 此 
还 需要 再 建立 两 个 新 表 命名 为 zhuanji 和 lanmu， 它 们 的 数据 结构 分 别 如 表 16-4 和 表 16-5 所 示 。 


表 16-4 表 zhuanji 的 数据 结构 
说 明 
video id 视频 的 编号 id 


zhuanji id 专辑 的 编号 id 
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字段 名 说 明 
< 的 编号 
科目 的 编号 


将 该 数据 库 的 备份 文件 导出 ， 具 体 代码 如 下 所 示 。 


构建 移动 网 站 与 APP: HTML 5+CSS 3+jQuery Mobile 入 门 与 实战 】 


16.4.2 ”数据 库 连 接 
在 PHP 开发 中 ， 经 常会 用 到 类 似 这 样 的 代码 : 


在 上 面 的 代码 中 有 一 句 $con=mysql_connect("localhost","root","")， 它 的 作用 是 连接 到 数据 
库 ， 这 其 中 需要 数据 库 的 账号 和 密码 。 那 么 万 一 某 一 天 开发 者 修改 了 MySQL 的 账号 或 者 密码 ， 
岂 不 是 要 把 每 一 个 文件 都 修改 一 遍 ? 

也 许 许多 编辑 器 提供 了 批量 修改 的 功能 ， 可 以 将 全 部 相同 的 字符 串 修改 成 某 一 内 容 ， 如 现在 
要 将 root 改 为 put， 就 可 以 使 用 批量 替换 ， 但 是 万 一 在 代码 中 有 两 个 变量 ， 一 个 是 root_var， 一 
个 是 put var， 那 么 使 用 批量 蔡 换 就 会 造成 一 些 错误 。 所 以 必须 想 一 个 办 法 把 这 段 内 容 从 各 个 页 
面 中 分 离 出 来 。 

一 个 比较 好 的 办 法 就 是 新 建 一 个 类 ， 然 后 每 当 需 要 连接 数据 库 的 时 候 就 去 引用 这 个 类 。 所 以 
现在 新 建 一 个 PHP 文件 ， 命 名 为 sql_connectphp， 具 体内 容 如 下 所 示 。 


这 样 一 来 ， 当 数据 库 的 账号 或 密码 修改 时 ， 只 需要 修改 该 文件 中 的 内 容 就 可 以 了 。 


16.5 功能 的 实现 


接 下 来 需要 实现 从 数据 库 读 取 数 据 的 功能 ， 请 读者 先 自己 往 数据 库 中 加 入 一 些 数据 ， 然 后 就 
可 以 进行 开发 了 。 
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16.5.1 首页 功能 的 实现 


首页 所 需要 实现 的 功能 是 从 数据 库 中 读 取 栏 目 列表 ， 并 将 它们 显示 在 首页 上 ， 同 时 生成 指向 
这 些 栏目 页 面 的 链接 。 在 Apache 目录 下 新 建 一 个 文件 夹 ， 命 名 为 video， 并 将 如 下 的 文件 另存 
为 index.php， 放 入 其 中 。 


第 16 章 案例 : 实现 一 个 在 线 视频 播放 器 


运行 结果 如 图 16.13 所 示 。 
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基于 jQuery Mobile 的 视 铅 点 二 系统 
图 16.13 ”从 服务 端 读 取 了 数据 的 首页 界面 


本 章 依 然 引 用 了 自己 创建 的 数据 库 连接 类 SQL_CONNECT， 代 码 第 24~29 行 是 对 它 的 引 
用 ,文件 是 sql_connect.php。 


性 司 在 审查 这 一 范例 时 笔者 突然 想到 一 个 读者 可 能 会 疑惑 的 问题 ， 就 是 当 需 要 使 用 
| SQL_CONNECT 这 个 类 的 时 候 必须 要 修改 其 中 的 数据 库 ， 这 一 点 非常 不 方便 ， 为 什么 不 专 
门 规定 一 个 方法 来 设置 $database name 呢 ? 因为 本 书 所 涉及 的 项 目 只 会 使 用 到 同一 个 数据 
库 ， 因 此 没有 必要 合 近 求 远 。 


再 接 下 来 看 第 64 行 的 SQL 语句 : 


这 与 第 31 行 的 SQL 语句 可 以 起 到 非常 类 似 的 作用 ， 为 什么 最 后 多 了 那么 一 大 串 条 件 呢 ? 


这 里 其 实 是 笔者 偷 了 个 小 懒 ， 在 本 项 目 中 假设 栏目 已 经 被 固定 为 有 限 的 几 组 (电影 、 动 漫 、 
短片 、 电 视 剧 、 视 频 教程 )， 可 以 说 基本 是 不 会 再 发 生变 化 了 。 热 门 分 类 部 分 笔者 原本 的 计划 是 
列 出 最 新 上 传 的 视频 专辑 ， 而 这 一 部 分 可 以 有 很 多 ， 如 果 因 为 太 多 而 超出 屏幕 范围 可 不 是 一 件 好 
事 ， 于 是 就 只 能 对 该 部 分 的 数量 进行 限制 ， 这 就 有 了 LIMIT 4。 另 外 ， 由 于 zhuanji id 作为 数据 
表 的 索引 ， 是 会 随 着 上 传 的 次 数 而 增 大 的 ， 越 晚上 传 的 专辑 它 的 zhuanji_id 越 大 ， 这 样 只 要 按照 
逆序 排列 就 可 以 获取 到 最 新 上 传 的 专辑 列表 了 。 


虽然 zhuanji id 会 依次 增加 ， 可 是 如 果 在 上 传 了 许多 视频 之 后 将 第 一 个 专辑 删除 ， 那 么 
zhuanji_id=1 的 位 置 就 空缺 了 出 来 ， 如 果 再 上 传 新 的 专辑 ， 它 的 zhuanji id 仍然 是 1， 这 时 新 
上 传 的 专辑 按照 本 范例 中 使 用 的 方法 是 无 法 显示 出 来 的 。 
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16.5.2 ”专辑 列表 功能 的 实现 


在 上 一 小 节 实 现 首 页 功能 时 ， 已 经 指定 了 该 页 命名 为 lanmu.php， 它 的 作用 是 显示 栏目 中 的 
专辑 列表 ， 将 以 下 内 容 另存 为 lanmu.php， 存 到 video 目录 下 。 


构建 移动 网 站 与 APP: HTML 5+CSS 3+jQuery Mobile 入 门 与 实战 同 


运行 结果 如 图 16.14 所 示 。 
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16.14 栏目 播放 列表 
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构建 移动 网 站 与 APP: HTML 5+CSS 3+jQuery Mobile 入 门 与 实战 


由 于 需要 为 当前 被 选中 的 栏目 加 入 深 色 的 背景 ， 因 此 在 第 46 行 加 入 了 一 个 判断 ， 若 当前 的 
lanmu_ id 与 通过 GET 获取 的 id 相等 ， 则 为 列表 项 加 入 主题 a。 

从 范例 中 不 难看 出 ， 本 小 节 范 例 中 的 链接 指向 的 是 名 为 zhuanji.php 的 页 面 ， 它 的 实现 方法 
与 本 范例 非常 相似 ， 因 此 笔者 就 不 给 出 具体 实现 方法 了 ， 请 读者 自己 摸索 。 


16.5.3 ”播放 页 面 的 实现 
接 下 来 只 剩 最 后 一 个 页 面 了 ， 将 以 下 代码 另存 为 playphp， 内 容 如 下 所 示 。 


【第 16 章 “案例 : 实现 一 个 在 线 视频 播放 器 


构建 移动 网 站 与 APP: HTML 5+CSS 3+jQuery Mobile 入 门 与 实战 


与 之 前 实现 的 界面 相 比 ， 这 里 为 当前 正在 播放 的 视频 加 入 了 背景 色 ， 如 图 16.15 所 示 。 


生活 大 烛 炸 -第 四 集 
| 第 一 入 © 
| ss ©| 
| 第 三 集 © 
”第 五 集 © 
| 生生 © 
ts 


四 

+ 

Ea. 
lololololo ele 


基于 jQuery Mobile 的 视频 点 系统 
图 16.15 视频 播放 页 面 
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第 16 章 ”案例 ;实现 一 个 在 线 视 频 播放 器 


16.6 4 千 


本 章 使 用 video 控件 实现 了 一 个 简单 的 在 线 视频 点 播 系统 ， 该 系统 的 界面 布局 主要 参考 了 另 
一 款 jQuery Mobile 的 应 用 ， 它 证 实 了 jQuery Mobile 确实 是 可 以 制作 适合 平板 等 大 屏幕 移动 设备 
应 用 的 。 另 外 ， 本 章 所 介绍 的 视频 点 播 实际 上 还 是 一 个 非常 简单 的 “模型 >， 有 许多 在 实际 开发 
中 需要 考虑 的 内 容 〈 如 查询 速度 、 带 宽 等 问题 ) 都 被 笔者 有 意识 地 忽略 掉 了 ， 但 是 读者 万 万 不 可 
掉以轻心 ， 以 为 视频 点 播 就 是 这 么 简单 ， 实 际 上 任何 一 个 领域 的 应 用 想 要 做 到 极致 都 需要 日 久 天 


长 的 积累 。 
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